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

jQuery实现商品活动倒计时

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

<ul class="prolist"> 
   <li><img src="/UploadFiles/2021-04-02/p1.jpg">

上述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实现商品活动倒计时

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

标签:
jQuery实现倒计时,jQuery倒计时60秒,jQuery倒计时,jQuery倒计时插件

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery实现商品活动倒计时”

暂无“jQuery实现商品活动倒计时”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。