vue中倒計(jì)時(shí)組件的實(shí)例代碼-創(chuàng)新互聯(lián)

子組件:

目前創(chuàng)新互聯(lián)已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、昌樂網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
<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:'已結(jié)束' 
   }, 
   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}小時(shí)${min}分${sec}秒`; 
     }  
     if(day <= 0 && hour > 0 ){ 
      format = `${hour}小時(shí)${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>

文章名稱:vue中倒計(jì)時(shí)組件的實(shí)例代碼-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于:http://muchs.cn/article36/ddcesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊(cè)網(wǎng)站制作、做網(wǎng)站、網(wǎng)站策劃用戶體驗(yàn)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)