vue商城秒杀倒计时功能

template代码

<div><div class="component-wrapper" id="flash-sale"><div class="sale-header"><div class="countdown-zone"><div class="countdown-prefix">限時快搶</div><div class="countdown pure-css-countdown active"><div class="digits-wrapper hours">11</div><div class="digits-seperator">月</div><div class="digits-wrapper minutes">02</div><div class="digits-seperator">日</div><div class="digits-seperator">——</div><div class="digits-wrapper seconds">11</div><div class="digits-seperator">月</div><div class="digits-wrapper">03</div><div class="digits-seperator">日</div></div></div></div></div></div>

script代码

export default {data() {return {hou:0,min:0,sec:0,ssec:0,endTime:'',disprArr:[],}},created(){let that=thisthat.time()},methods:{time(){var that=thisvar interval = setInterval(function timestampToTime(){var date=(new Date(结束的时间戳)) - (new Date());//new Date当前的时间戳，也可以换成自定义的时间戳if (date > 0) {let time = 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商城秒杀倒计时功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。