jQuery实现商品活动倒计时


Posted in Javascript onOctober 16, 2015

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。

jQuery实现商品活动倒计时

本文以团购网站的倒计时为背景,我们知道,网站会给每个优惠活动(商品)定一个结束时间,也就是到期时间,但系统时间到达了结束时间,就意味着活动结束。因此,我们在HTML中就要定义活动的结束时间。
HTML

<ul class="prolist"> 
   <li><img src="images/p1.jpg" />简约时尚皮带男士手表一款69元<p class="endtime showtime" 
   value="1354365003"></p></li> 
   <li><img src="images/p2.jpg" />高强度无毒树脂材料榨汁器24元<p class="endtime showtime" 
   value="1350748800"></p></li> 
   <li><img src="images/p3.jpg" />茶香番茄/乌梅/杨梅0.48元<p class="endtime showtime" 
   value="1346487780"></p></li> 
   <li><img src="images/p4.jpg" />沙滩鞋男士户外凉鞋69元<p class="endtime showtime" 
   value="1367380800"></p></li> 
</ul>

上述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} 
.prolist{margin:10px auto} 
.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px; 
position:relative} 
.prolist li img{width:320px; height:198px;} 
.showtime{position:absolute; top:174px; height:24px; line-height:24px; 
background:#333; color:#fff; opacity:.6; display:none}

保存,预览页面效果,可以看到一个排列整齐的活动列表。
jQuery

var serverTime = * 1000; //服务器时间,毫秒数 
$(function(){ 
  var dateTime = new Date(); 
  var difference = dateTime.getTime() - serverTime; //客户端与服务器时间偏移量 
   
  setInterval(function(){ 
   $(".endtime").each(function(){ 
    var obj = $(this); 
    var endTime = new Date(parseInt(obj.attr('value')) * 1000); 
    var nowTime = new Date(); 
    var nMS=endTime.getTime() - nowTime.getTime() + difference; 
    var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); //天 
    var myH=Math.floor(nMS/(1000*60*60)) % 24; //小时 
    var myM=Math.floor(nMS/(1000*60)) % 60; //分钟 
    var myS=Math.floor(nMS/1000) % 60; //秒 
    var myMS=Math.floor(nMS/100) % 10; //拆分秒 
    if(myD>= 0){ 
      var str = myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒"; 
    }else{ 
      var str = "已结束!";  
    } 
    obj.html(str); 
   }); 
  }, 100); //每个0.1秒执行一次 
});

我们首先获取服务器时间,我们要将倒计时与服务器时间保持一致,这样一来每个客户端看到的倒计时是一样的,我们通过计算客户端与服务器的时间偏移量,来避免了因客户机器时间与服务器时间不一致而引起的倒计时不同步的麻烦。当然这个服务器时间需要使用服务端语言来获取,本文使用了PHP的time()函数获取的秒数,记得要乘以1000转换成毫秒数。
我们通过setInterval建立一个定时器,并且每个100毫秒执行一次setInterval里面的代码。
然后在定时器里,我们使用jQuery的each()方法,遍历页面中的列表,计算天、小时、分、秒。
因为javascript的getTime()函数获取的是毫秒数,所以计算过程中都要/1000,
我们并不想在一个页面将列表中所有的倒计时都显示出来,而需要用户将鼠标滑向列表中的图片才显示对应的倒计时,因此我们还需要加入以下辅助代码:

$(function(){ 
  $(".prolist li img").each(function(){ 
    var img = $(this); 
    img.hover(function(){ 
      img.next().show(); 
    },function(){ 
      img.next().hide(); 
    }); 
  }); 
});

最终效果图:

jQuery实现商品活动倒计时

以上就是关于倒计时的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
Javascript 严格模式use strict详解
Sep 16 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
js如何打印object对象
Oct 16 #Javascript
JavaScript各类型的关系图解
Oct 16 #Javascript
js实现新浪微博首页效果
Oct 16 #Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 #Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 #Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 #Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 #Javascript
You might like
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python getopt 参数处理小示例
2009/06/09 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
授权委托书格式模板
2014/04/03 职场文书
市场营销策划方案
2014/06/11 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
病房管理制度范本
2015/08/06 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技