当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue中倒计时组件的实例代码

vue中倒计时组件的实例代码

2018年08月08日  | 移动技术网IT编程  | 我要评论

cf黑色曼陀罗,今天新开传世私服,平顶山人才交流中心

子组件：

<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="1590761620" :callback="callback" endtext="已经结束了"></count-down> 
methods:{
callback:function(){
}
}

总结

以上所述是小编给大家介绍的vue中倒计时组件的实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网