很多网站都有倒计时功能,这里教大家做一个支持同页面多个倒计时基于jquery的做法。
工具/原料
1
工具用的最简单的EditPlus
2
下载一个jquery.js
方法/步骤
1
打开工具,点击左上角文件-选择新建一个html网页。如图:
2jquery版的网页倒计时效果
这里有一段现成的html代码,有一些CSS样式不再这次的讲解之内,下列代码直接拷贝到工具里面就可以运行,先运行起来看效果我再讲过程。代码如下:
网页上的倒计时
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
0天 0时 0分 0秒
3
讲解开始,其他html标签CSS样式全部过滤,直接看JQUERY代码。
4
整个JS代码解释都有了,希望能帮助大家。实在不懂某一行代码,可以问问身边的人。这整段代码都相对来说过于简单。这是我在网上查找资料学习别人的源码自己再二次修改所得的倒计时。
注意事项
1
注意绑定class别写错了
2
还有div倒计时那里是总共的秒数,不是毫秒数。
下一篇:出国游中如何让长途飞行更愉快