vue 倒计时2

<template>
  <div id="test">
      {{text}}<div id="meClocker" v-show='go_study'>{{clocker}}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      startTime: null,
      endTime: null,
      currentTime: Math.round(new Date().getTime()/1000), 当前时间
      clocker: "", //显示倒计时
      timeobj: null, //时间对象
      text:'自习时间还剩:',
      go_study:false,
    };
  },

  created(){

      var calss1_start2 = Math.round(new Date(new Date(new Date().getTime()).setHours(8,0,0,0))/1000)  //获取当天8点 开始自习

      var calss1_start = Math.round(new Date(new Date(new Date().getTime()).setHours(0,8,0,0))/1000)
      var calss1_end = Math.round(new Date(new Date(new Date().getTime()).setHours(0,8,10,0))/1000)

      var rest_start = Math.round(new Date(new Date(new Date().getTime()).setHours(0,8,0,0))/1000)
      var rest_end = Math.round(new Date(new Date(new Date().getTime()).setHours(0,8,10,0))/1000)

      this.endTime = calss1_end;
      this.startTime = calss1_start;

      console.log(this.endTime,this.startTime)


      if(this.currentTime >= calss1_start2){
          console.log(this.currentTime)
          this.go_study = true;
        }
    this.begin();


    // var timestamp = Math.round(new Date('2019-11-29 16:00:00').getTime()/1000);   //获取指定时间的时间戳/1000 是要舍弃后面三位数
    // var timestamp2 = Math.round(new Date().getTime()/1000);  //获取当前的时间戳
    // var timestamp3 = Math.round(new Date(new Date().toLocaleDateString()).getTime()/1000)  //当天零点
    // let startTime = Math.round(new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0,0,0,0))/1000);// 前一天0点
    // let endTime = Math.round(new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23,59,59,999))/1000)  //当天零点
    
  },


  methods: {

    begin(){
      let timeLag = parseInt(this.endTime) - parseInt(this.startTime);

      let add0 = num => {
        return num < 10 ? "0" + num : num;
      };
      let timeFunction = () => {
        // time为两个时间戳之间相差的秒数
        let time = timeLag--;
        //打印出时间对象
        this.timeobj = {
          seconds: time % 60,
          minutes: Math.floor(time / 60) % 60,
          hours: Math.floor(time / 60 / 60) % 24,
          days: Math.floor(time / 60 / 60 / 24),
          weeks: Math.floor(time / 60 / 60 / 24 / 7),
          months: Math.floor(time / 60 / 60 / 24 / 30),
          years: Math.floor(time / 60 / 60 / 24 / 365)
        };
        this.clocker = 
            `
            ${add0(this.timeobj.hours)}:
            ${add0(this.timeobj.minutes)}: 
            ${add0(this.timeobj.seconds)}
            `;
        // 当时间差小于等于0的时候证明倒计时已经过结束
        if (time <= 0) {
          clearInterval(go);
          this.go_study = !this.go_study;
          this.go_rest = true;
          this.begin2();
        }
      };

      //此处调用函数避免前一秒倒计时不显示
      timeFunction();
      let go = setInterval(function(){
        timeFunction();
      }, 1000);
    },

    },
  }
}
</script>

<style scoped>
#test {
  height: 100%;
}
.clocker{
  padding: 10px;
  overflow: hidden;
  font-size: 10px;
}
</style>

发布了180 篇原创文章 · 获赞 36 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/weixin_38404899/article/details/103382036