vue 倒计时2

系统管理员 2023-06-19 02:49 3阅读 0赞

<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>