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商城秒杀倒计时功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。