Welcome

首页 / 脚本样式 / JavaScript

Vue数据驱动模拟实现2

2017-02-06 19
一、前言在随笔“模拟Vue之数据驱动1”结尾处，我们说到如果监听的属性是个对象呢？那么这个对象中的其他属性岂不就是监听不了了吗？如下：倘若user中的name、age属性变化，如何知道它们变化了呢？今儿，就来解决这一问题。通过走读Vue源码，发现他是利用Observer构造函数为每个对象创建一个Observer对象，来监听数据的，如果数据中的属性又是一个对象，那么就又通过Observer来监听嘛。其实，核心思想就是树的先序遍历（关于树，可参考here）。如...

简单实现JS计算器功能

2017-02-06 19
该计算器功能：1.校验：小数点，重复计算，以及大量更符合用户体验的操作。2.能够从键盘输入。效果图：html代码：<！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" con...

JS无缝滚动效果实现方法分析

2017-02-06 28
本文实例讲述了JS无缝滚动效果实现方法。分享给大家供大家参考，具体如下：效果：1.默认缓慢往左滚动2.放到左箭头上还是向左滚动，放到右箭头上向右滚动3.放到图片上停止滚动，移出继续滚动思路：1.计算图片列表ul的宽度2.开启定时器，使其向左边距不断增大，造成向左运动的效果3.图片列表复制一份，向左移动时，当左边距大于一份的宽度时，把它的左边距拉回到0。向右移动时，当左边距大于0时，把它的左边距拉到整个两份图片列表一半的宽度（即一份的宽度）。（拉的瞬间很快，...

详解jQuery的表单验证插件--Validation

2017-02-06 30
大致介绍jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的...

vue.js实现仿原生ios时间选择组件实例代码

2017-02-06 21
前言最近几个月一直在看VUE，然后试着只用原生js+vue实现某些组件。PC端时间选择组件 这是最开始实现的pc上的时间选择，平时移动端也在做，所以就想实现一下移动端的时间选择器，下面分享一下我实现移动端滚轮特效时间选择器的思路和过程。整个组件是基于vue-cli来进行构建的功能1.时间选择[ A.年月日选择 B.年月日小时分钟选择 C.小时分钟选择 D.分钟选择]2.滚轮效果[ A.构成一个圆环首尾相连 B.不构成首尾相连]3.时间选择范围设置（所选时间...

JS定时器用法分析【时钟与菜单中的应用】

2017-02-06 20
本文实例分析了JS定时器用法。分享给大家供大家参考，具体如下：开启定时器：setInterval 间隔型 //一旦启动就不会停，重复执行setTimeout 延迟型 //只执行一次停止定时器：clearIntervalclearTimeout关闭定时器如果只是clearInterval（）那会关掉所有的定时器，有时我们只需要关掉一个而已，所以要定义一个变量来存放定时器var timer=null;btn1.onclick=function（）{timer=...

JS实现获取来自百度,Google,soso,sogou关键词的方法

2017-02-06 27
本文实例讲述了JS实现获取来自百度,Google,soso,sogou关键词的方法。分享给大家供大家参考，具体如下：/*可获取用户,通过哪个关键词访问该页,可自行添加SOGOU,SOSO,有道等搜索引擎*/var refer=document.referrer;var sosuo=refer.split（"."）[1];var grep=null;var str=null;var keyword=null;switch（sosuo）{ case "baid...

详解JavaScript的闭包、IIFE、apply、函数与对象

2017-02-06 24
目录一、闭包（Closure）1.1、闭包相关的问题1.2、理解闭包二、对象2.1、对象常量（字面量）2.2、取值2.3、枚举（遍历）2.4、更新与添加2.5、对象的原型2.6、删除2.7、封装三、函数3.1、参数对象 （arguments）3.2、构造函数3.3、函数调用3.3.1、call3.3.2、apply3.3.3、caller3.3.4、Callee3.5、立即执行函数表达式 （IIFE）3.5.1、匿名函数与匿名对象3.5.2、函数与函数表达...

利用Bootstrap实现表格复选框checkbox全选

2017-02-06 24
首先来看看实现的效果图：HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了：<table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>类别编号</th> <th>类别名称</th> <th>类别组</th> <...

js实现的简练高效拖拽功能示例

2017-02-06 19
本文实例讲述了js实现的简练高效拖拽功能。分享给大家供大家参考，具体如下：运行效果图如下：具体代码如下：<！DOCTYPE HTML><html><head> <meta http-equiv="content-type" charset="utf-8" /><meta http-equiv="content-type" content="text/html" /><title>dem...

基于jPlayer三分屏的制作方法

2017-02-06 21
三分屏，这里的三分屏只是在一个播放器里同时播放三个视频，但是要求只有一个控制面板同时控制它们，要求它们共享一个时间轨道。这次只是简单的模拟了一下功能，并没有深入的研究。首先，需要下载jPlayer，jPlayer是一个JavaScript写的完全免费和开源的jQuery多媒体库插件，我觉得他最大的好处就是兼容性，并且页面也简洁大方，个人比较喜欢。jPlayer可到其官网下载最新版本（http://www.jplayer.cn）。并且官网有开发文档和Demo...

JS实现的系统调色板完整实例

2017-02-06 18
本文实例讲述了JS实现的系统调色板。分享给大家供大家参考，具体如下：运行效果图如下：整体页面代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>DW调色板</title><script type="text/javascript" language="javascr...

js返回顶部实例分享

2017-02-06 18
话不多说，请看实例1、HTML结构<div class="return_top"></div>2、css样式.return_top{ width: 50px; height: 50px; background: url（../images/lanren.gif） no-repeat center #FF8D16; position:fixed; right: 30px; bottom: 30px; display: none; cu...

jQuery实现立体式数字动态增加（animate方法）

2017-02-06 20
1、HTML结构<div class="integral">已有<span class="ii"></span>积分</div>2、js<script type="text/javascript" src="js/jquery.js" ></script><script type="text/javascript" src="js/animateNumber.js"><...

js编写三级联动简单案例

2017-02-06 17
刚给学妹写了个简单的地区的三级联动简单案例，分享给正在学习的朋友参考下<html> <head> <！--导入jquery--> <script type="text/javascript"src="jquery1.7.1.js"></script> </head><script type="text/javascript"> $（function（）{//页面加载load...

JS实现仿PS的调色板效果完整实例

2017-02-06 19
本文实例讲述了JS实现仿PS的调色板效果。分享给大家供大家参考，具体如下：运行效果图如下：完整实例代码：<html><head><style>#colorpad table{border-collapse:collapse;cellpadding:0;cellspacing:0;width:255px;height:255px;border:0;}#colorpadright table{border-collapse:...

如何实现星星评价（jquery.raty.js插件）

2017-02-06 22
1、引入jquery.js文件2、引入jquery.raty.js3、页面中放在这个：<span class="readOnly" data-path="images" ><i>4.5</i></span>4、js：function star（obj,num）{ $（obj）.raty（{path: function（） {return this.getAttribute（"data-path"）;//路径 ...

jquery实现输入框实时输入触发事件代码

2017-02-06 20
话不多说，请看代码$（".aa"）.bind（"input propertychange", function（） {searchProductClassbyName（）;}）;function searchProductClassbyName（） {写函数内容}以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！...

jQuery延迟执行的实现方法

2017-02-06 20
本文实例讲述了jQuery延迟执行的实现方法。分享给大家供大家参考，具体如下：做一个控件时碰到的一些无法同步处理的事件，可以用这样的延迟方法。<html><script src="js/jquery.js"></script><script>$（function（）{$（"#test"）.bind（"click",function（）{setTimeout（function（）{alert（$（"#test"...

利用BootStrap的Carousel.js实现轮播图动画效果

2017-02-06 37
前期准备：1.jquery.js。2.bootstrap的carousel.js。3.bootstrap.css。一起来看代码吧：页面比较丑，希望大家不要介意哦嘻嘻效果图：html+js：<！DOCTYPE html><html><head> <meta charset="utf-8"> <title>my love-首页</title> <link rel="styleshee...
<< 41 42 43 44 45 46 47 48 49 50 >>
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图