Vue: 倒计时

HTML:

<div>{{countDownList}}</div>

script: 

export default {
  data() {
    return {
      countDownList: '00天00时00分00秒',
      actEndTime: '2018-11-19 18:50:00'
    };
  },
  created() {
    this.countDown();

  },

  methods: {
    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },
    countDown(it) {
      var interval = setInterval(() => {
        // 获取当前时间,同时得到活动结束时间数组
        let newTime = new Date().getTime();
        // 对结束时间进行处理渲染到页面
        let endTime = new Date(this.actEndTime).getTime();
        let obj = null;
        // 如果活动未结束,对时间进行处理
        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000;
          // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt(time % (60 * 60 * 24) / 3600);
          let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
          let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else { // 活动已结束,全部设置为'00'
          obj = {
            day: '00',
            hou: '00',
            min: '00',
            sec: '00'
          };
          clearInterval(interval);
        }
        this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
      }, 1000);
    }
  }

}

 Vue学习笔记-倒计时插件

https://www.jianshu.com/p/3fd7f021c42a

倒计时

https://blog.csdn.net/web_1993/article/details/83143186

vue中多个倒计时实现 

https://blog.csdn.net/jw19950424/article/details/80169794

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章