本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下
首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行:
关于实现京东秒杀,之前用过其他的方法,今天给大家分享一个原生的方法吧,不会很难。
1,倒计时页面结构:
& lt; div类=皊econdkill”比;
& lt; div类=岸ゼ丁北?
& lt;跨类=昂焐玣l”祝辞掌上秒杀& lt;/span>
& lt;跨类=" num fl "祝辞0 & lt;/span>
& lt;跨类=" num fl "祝辞5 & lt;/span>
& lt;跨类="结肠fl "祝辞:& lt;/span>
& lt;跨类=" num fl "在3 & lt;/span>
& lt;跨类=" num fl "祝辞5 & lt;/span>
& lt;跨类="结肠fl "祝辞:& lt;/span>
& lt;跨类=" num fl "在3 & lt;/span>
& lt;跨类=" num fl "祝辞0 & lt;/span>
& lt;跨类=癴r”在更多& lt;/span>
& lt;/div>
2, css样式:这个是用css的编译器sass写的
.secondkill {
.top {
高度:40像素;
border-top: 3 px固体jdred美元;
边界底部:1 px固体# ccc;
padding-top: 5 px;
r {
颜色:jdred美元;
}
.num {
background - color: # 000;
保证金:0 px 3 px;
填充:3 px;
颜色:白色;
}
}
3, js部分:
//倒计时//1。指定倒计时的到期时间(2018-5-29 21:08:49)//可以直接使用年月日时分秒来创建一个日期对象,但是月是从0开始的
var=新日期(2018年4 29日20日20日10);
函数antitime () {
现在var=新的日期();//2。拿到当前时间和过期时间之间的时间差(毫秒)
var deltaTime=-现在;//到期时间和当前时间相差的毫秒数//如果超时了,就停止倒计时
如果(deltaTime & lt;=0) {//停止计时器
window.clearInterval(计时器);//停止执行下面的代码
返回;
}//已知毫秒数,算出几分几秒几秒
var m=数学。地板(deltaTime/(60 * 1000));//算出有多少秒
var s=数学。地板(deltaTime/60 1000%);//算出多少毫秒,毫秒数只显示10位和百位
var=女士数学。地板(1000/10 deltaTime %);//把时间的数字转成字符串,如果分秒毫秒不足,则前面补0
var timeStr=" + (m<10 & # 63;“0”+ m: m) + (s<& # 63;“0”+ s: s) + (ms<& # 63;“0”+女士:ms);
console.log (timeStr);//063535//每个是用来遍历。num元素,其实你可以理解成循环
$("。secondkill .num”)。每个(函数(指数、跨度){//console.log(跨度);
$(跨度). html (timeStr。substring(索引,索引+ 1));//美元(跨度),跨度默认是一个js对象,需要用美元(跨度)变成一个jquery对象//$(跨度). html();这个方法是用来设置跨度里面的值的//timeStr.subSring();该方法是用来截取字符串“英语字母”
});
}//每十毫秒执行一次
var计时器=setInterval (antitime 10);
});
<强>注意部分:
1,注意这个部分,时间要给定一个时间,比如京东上午十点秒杀结束,那这里时间就要填10点,注意月份是从0开始的,所以5月要写4月。这个时间如果过了这个倒计时就不会再执行了的,大家谨记。
var=新日期(2018年4 29日20日20日10);
2,这里拿到的是毫秒,在后面计算分秒毫秒的时候大家要注意换算。
//2。拿到当前时间和过期时间之间的时间差(毫秒)
var deltaTime=-现在;//到期时间和当前时间相差的毫秒数
之前
3,要判断,如果不足10就要给前面加一个0。
//把时间的数字转成字符串,如果分秒毫秒不足,则前面补0
var timeStr=" + (m<10 & # 63;“0”+ m: m) + (s<& # 63;“0”+ s: s) + (ms<& # 63;“0”+女士:ms);
console.log (timeStr);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
