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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
JS获取时间的方法
Jan 21 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 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使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python实现八皇后问题示例代码
2018/12/09 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python安装pil库方法及代码
2019/06/25 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
小学敬老月活动方案
2014/02/11 职场文书
联谊会主持词
2014/03/26 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
长城的导游词
2015/01/30 职场文书
导游词之唐山景点
2019/12/18 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
Spring 使用注解开发
2022/05/20 Java/Android
Linux安装Docker详细教程
2022/07/07 Servers