我發現好多倒計時的插件，刷新都會變成從頭再來，于是自己用vue2.0寫了一個，測試通過，直接上代碼

如下是組件代碼：

<template><span :endTime="endTime" :callback="callback" :endText="endText"><slot>{{content}}</slot></span> </template> <script>export default {data(){return {content: '',}},props:{endTime:{type: String,default :''},endText:{type : String,default:'已結束'},callback : {type : Function,default :''}},mounted () {this.countdowm(this.endTime)},methods: {countdowm(timestamp){let self = this;let timer = setInterval(function(){let nowTime = new Date();let endTime = new Date(timestamp * 1000);let t = endTime.getTime() - nowTime.getTime();if(t>0){let day = Math.floor(t/86400000); let hour=Math.floor((t/3600000)%24); let min=Math.floor((t/60000)%60); let sec=Math.floor((t/1000)%60); hour = hour < 10 ? "0" + hour : hour;min = min < 10 ? "0" + min : min;sec = sec < 10 ? "0" + sec : sec;let format = '';if(day > 0){format = `${day}天${hour}小時${min}分${sec}秒`;} if(day <= 0 && hour > 0 ){format = `${hour}小時${min}分${sec}秒`; }if(day <= 0 && hour <= 0){format =`${min}分${sec}秒`;}self.content = format;}else{clearInterval(timer);self.content = self.endText;self._callback();}},1000);},_callback(){if(this.callback && this.callback instanceof Function){this.callback(...this);}}}} </script>

下面是調用代碼：

<count-down endTime="1490761620" :callback="callback" endText="已經結束了"></count-down>

ednTime 是時間結束之后的時間戳? callback是結束之后的回調? endText是結束之后的文字顯示！

轉載

轉載于:https://www.cnblogs.com/azhqiang/p/9440968.html

總結

以上是生活随笔為你收集整理的vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)的全部內容，希望文章能夠幫你解決所遇到的問題。

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