zoukankan      html  css  js  c++  java
  • vuejs 实现24小时倒计时

    DOM结构
    <div class="SYtime">
                    剩余
                    <span class="span">{{hh}}</span>:
                    <span class="span">{{mm}}</span>:
                    <span class="span">{{ss}}</span>自动结束
                </div>

    vue代码结构

    data(){
    return{
          hh: '00',
          mm: '00',
          ss: '00',
          flag: false,
    }
    }
    mounted () {
        let time = setInterval(() => {
          if (this.flag == true) {
            clearInterval(time)
          }
          this.timeDown()
        }, 500)
      },
    methods:{
      timeDown () {
          const endTime = new Date(this.beginTime).getTime() + 24 * 60 * 60 * 1000;
          const nowTime = new Date(this.beginTime);
          var date = new Date();
          var now = date.getTime(nowTime);
          //设置截止时间
          var endDate = new Date(endTime);
          var end = endDate.getTime();
          //时间差
          var rightTime = end - now;//截止时间减去当前时间
          if (rightTime > 0) {//判断剩余倒计时时间如果大于0就执行倒计时否则就结束
            // var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
            var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
            var mm = Math.floor((rightTime / 1000 / 60) % 60);
            var ss = Math.floor((rightTime / 1000) % 60);
            this.hh = hh;
            this.mm = mm;
            this.ss = ss;
          } else {
            this.isfail = true;
          }
        },
    }

  • 相关阅读:
    python连接字符串的几种方法--转子(香草拿铁的园子)
    winform属性
    C# Timer
    SQL基础
    SQL 基础
    File类 ReadAllBytes() ReadAllLines() ReadAllText()
    学习C#20天有感
    装箱和拆箱
    机器学习基础:朴素贝叶斯小结
    分类问题样本不均衡问题
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/14165059.html
Copyright © 2011-2022 走看看