星空网 > 软件开发 > Java

电商限时购:精确到毫秒的倒计时!

现如今做电商网站必不可少的一个效果就是限时抢购,这也是各大电商网站的一种促销手段。下面的图片就是聚划算上面的限时抢的效果

电商限时购:精确到毫秒的倒计时!

一、实现限时抢的效果需要用到的知识 :Javascript Date()对象

  • Date()返回当前的日期和事件
  • getYear()返回年份 获得年最好用
  • getFullYear()方法来操作(完整格式如2016)
  • getMonth()返回月份值(从0开始,+1)
  • getDay()返回星期几(0-6)
  • getHours()返回小时数(0-23)
  • getMinutes()返回分钟数(0-59)
  • getSeconds()返回秒数
  • getTime()返回毫秒数

当然,上面的调用方法我们不一定全部用到,也要看你自己的需求,废话不多说,我们直接上代码:

  1、HTML页面代码:

<p ></p>

我们把倒计时的内容放在class为left-time的<p>标签内.

  2、JS脚本:

$(function(){   function leftTime(){    var endTime = new Date("2016/5/20,12:00:00");//结束时间    var curTime = new Date();//当前时间    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差    //小时、分、秒需要取模运算    var d = parseInt(leftTime/(60*60*24));    var h = parseInt(leftTime/(60*60)%24);    var m = parseInt(leftTime/60%60);    var s = parseInt(leftTime%60);    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);    var txt = "剩余:"+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";    $(".left-time").text(txt);    if(leftTime<=0){ $(".left-time").text("团购结束");}  };  leftTime();  var set = setInterval(leftTime,100);});

上面的js就实现了一个简单的限时抢的小例子,其中parseInt()方法是取整,getTime()把时间转化为毫秒,除了parseInt()方法之外,还可以用Math.floor()向下取整的方法代替.

最后记得不要忘记了给个if()判断时间结束的时候需要显示的内容哦,不然就会出现不必要的小bug哟!O(∩_∩)O~




原标题:电商限时购:精确到毫秒的倒计时!

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

店铺信息:https://www.goluckyvip.com/tag/5579.html
销量莫名降低:https://www.goluckyvip.com/tag/558.html
好图片:https://www.goluckyvip.com/tag/5581.html
海外账户怎么开户:https://www.goluckyvip.com/tag/55821.html
电商培训讲师:https://www.goluckyvip.com/tag/5583.html
货源模式:https://www.goluckyvip.com/tag/5584.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流