微客导航 » 文章资讯 » vue实现商城秒杀倒计时功能

vue实现商城秒杀倒计时功能

2023-08-04 15:50:03 362

vue实现商城秒杀倒计时功能，效果图如下所示：

template代码





限時快搶

11

月

日

——

11 月 03 日

script代码

exportdefault{
data(){
return{
hou:0,
min:0,
sec:0,
ssec:0,
endTime:'',
disprArr:[],
}
},
created(){
letthat=this
that.time()
},
methods:{
time(){
varthat=this
varinterval=setInterval(functiontimestampToTime(){

vardate=(newDate(结束的时间戳))-(newDate());
//newDate当前的时间戳，也可以换成自定义的时间戳
if(date>0){
lettime=date/1000;
//获取时、分、秒,毫秒
that.hou=parseInt((time%(60*60*24))/3600)<10?('0'+parseInt((time%(60*60*24))/3600)):parseInt((time%(60*60*24))/3600)
that.min=parseInt(((time%(60*60*24))%3600)/60)<10?('0'+parseInt(((time%(60*60*24))%3600)/60)):parseInt(((time%(60*60*24))%3600)/60);
that.sec=parseInt(((time%(60*60*24))%3600)%60)<10?('0'+parseInt(((time%(60*60*24))%3600)%60)):parseInt(((time%(60*60*24))%3600)%60);
that.ssec=parseInt(((date%(60*60*24))%3600)/60)%10
}else{
//活动已结束，全部设置为'00'
//console.log("aaa")
that.day="00",
that.hou="00",
that.min="00",
that.sec="00"
}
},100)
}
},
};

总结

以上所述是小编给大家介绍的vue实现商城秒杀倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue实现商城秒杀倒计时功能

热门推荐

随机推荐