javascript毫秒计时器_基于javascript实现精确到毫秒的倒计时限时抢购

这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下

一、效果图

下面的图片就是聚划算上面的限时抢的效果

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

Date()返回当前的日期和事件

getYear()返回年份 获得年最好用

getFullYear()方法来操作(完整格式如2016)

getMonth()返回月份值(从0开始,+1)

getDay()返回星期几(0-6)

getHours()返回小时数(0-23)

getMinutes()返回分钟数(0-59)

getSeconds()返回秒数

getTime()返回毫秒数

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

1、HTML页面代码:

我们把倒计时的内容放在class为left-time的

标签内.

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哟!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值