最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery倒计时效果(精确毫秒,适合团购)
时间:2013-11-16 编辑:简简单单 来源:一聚教程网
本文以团购网站的倒计时为背景,我们知道,网站会给每个优惠活动(商品)定一个结束时间,也就是到期时间,但系统时间到达了结束时间,就意味着活动结束。因此,我们在HTML中就要定义活动的结束时间。
HTML
代码如下 | 复制代码 |
上述html代码中,我们建立了一个列表,用于展示活动名称、图片和倒计时,关键的是我们在每个活动定义了结束时间:.endtime属性value的值,这个值是一串数字,表示自1970年1月1日以来的秒数,由后台(PHP)生成。比如结束时间2013-05-01 12:00可以通过PHP转换为1367380800秒,转换后的秒数可以用来接下来的jQuery计算倒计时。
CSS
我们需要给页面中的列表实际一个稍微好看点的外观。
代码如下 | 复制代码 |
.endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000} |
保存,预览页面效果,可以看到一个排列整齐的活动列表。
jQuery
代码如下 | 复制代码 |
var serverTime = * 1000; //服务器时间,毫秒数 |
我们首先获取服务器时间,我们要将倒计时与服务器时间保持一致,这样一来每个客户端看到的倒计时是一样的,我们通过计算客户端与服务器的时间偏移量,来避免了因客户机器时间与服务器时间不一致而引起的倒计时不同步的麻烦。当然这个服务器时间需要使用服务端语言来获取,本文使用了PHP的time()函数获取的秒数,记得要乘以1000转换成毫秒数。
我们通过setInterval建立一个定时器,并且每个100毫秒执行一次setInterval里面的代码。
然后在定时器里,我们使用jQuery的each()方法,遍历页面中的列表,计算天、小时、分、秒。
因为javascript的getTime()函数获取的是毫秒数,所以计算过程中都要/1000,
我们并不想在一个页面将列表中所有的倒计时都显示出来,而需要用户将鼠标滑向列表中的图片才显示对应的倒计时,因此我们还需要加入以下辅助代码:
代码如下 | 复制代码 |
$(function(){ |
最终效果图
上面讲完了,下面看个效果
代码如下 | 复制代码 |
|
如果你要求不高可参考下面jquery倒计时效果二
代码如下 | 复制代码 |
网页上的倒计时0days 0h 0m 0s |
相关文章
- jquery商城活动秒杀倒计时插件 01-16
- jQuery 倒计时功能的实现例子整理 07-30
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31