vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

来源:互联网 发布:淘宝优惠券图标 编辑:程序博客网 时间:2024/06/05 20:31

我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用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是结束之后的文字显示!


阅读全文
0 0
原创粉丝点击