vue实现商城秒杀倒计时功能
vue实现商城秒杀倒计时功能,效果图如下所示:
template代码
限時快搶 11
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。