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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
react项目从新建到部署的实现示例
Feb 19 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知道与问问的采集插件代码
2010/10/12 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
最短的IE判断代码
2011/03/13 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python bisect模块原理及常见实例
2020/06/17 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
造型师求职自荐信
2013/09/27 职场文书
工程监理应届生求职信
2013/11/09 职场文书
进步之星获奖感言
2014/02/22 职场文书
电钳工人个人求职信
2014/05/10 职场文书
红色旅游心得体会
2014/09/03 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
健康状况证明模板
2014/10/23 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
计划生育责任书
2015/05/09 职场文书
二十年同学聚会感言
2015/07/30 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
python基础之类方法和静态方法
2021/10/24 Python