vue2.0實現(xiàn)倒計時的插件(時間戳 刷新 跳轉 都不影響)
更新時間：2017年03月30日 11:31:49 作者：實現(xiàn)豐盛
我發(fā)現(xiàn)好多倒計時的插件，刷新都會變成從頭再來，于是自己用vue2.0寫了一個，感覺還不錯，特此分享到腳本之家平臺供大家參考下
我發(fā)現(xiàn)好多倒計時的插件，刷新都會變成從頭再來，于是自己用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是結束之后的文字顯示！
以上所述是小編給大家介紹的vue2.0實現(xiàn)倒計時的插件(時間戳 刷新 跳轉 都不影響)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
本文介紹了如何在Vue3項目中整合Live2D技術,從Live2D的基本介紹到在Vue3中的具體實現(xiàn)方法,Live2D技術允許開發(fā)者將二維圖像轉化為可動畫的三維模型,主要應用于游戲、虛擬角色等領域,文章詳細說明了在vue3項目中使用Live2D的步驟,感興趣的朋友一起看看吧2024-10-10
本文主要介紹了Webpack和Vite的區(qū)別小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
今天小編就為大家分享一篇關于vue-router實現(xiàn)編程式導航的代碼實例，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue中的diff算法時常是面試過程中的考點,本文將為大家講解何為diff以及diff算法的實現(xiàn)過程,那么在了解diff之前,我們需要先了解虛擬DOM是什么,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue 本地服務不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細，需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)橫屏滾動公告效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 插槽簡介及使用示例，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-11-11
vue-electron項目創(chuàng)建記錄及問題小結解決方案
這篇文章主要介紹了vue-electron項目創(chuàng)建記錄及注意事項,本文給大家分享了運行項目報錯的問題小結及多種解決方案,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue狀態(tài)管理。下面文章主要圍繞著使用Pinia代替Vuex的相關資料展開具體內容,需要的朋友可以參考一下，希望對你有所幫助2021-11-11