zoukankan      html  css  js  c++  java
  • vue中在一个页面如何设置多个倒计时

    <script>

    function countDownFun(time) {
      time--; //时间一秒秒的减
      let nowTime = new Date().getTime(); //现在时间
      if (nowTime <= time) {
        //获取时间差
        let timediff = Math.round((time - nowTime) / 1000);
        //获取还剩多少天
      let day = parseInt(timediff / 3600 / 24);
      //获取还剩多少小时
      let hour = parseInt((timediff / 3600) % 24);
      //获取还剩多少分钟
      let minute = parseInt((timediff / 60) % 60);
      //获取还剩多少秒
      let second = timediff % 60;
      return day + "天" + hour + "小时" + minute + "分" + second + "秒";
      } else {
        return "00天00小时00分00秒";
      }
    }

    export default {
      name: "meizhoupintuan",
      async created() {
        let data = await home_meizhou_api();
        this.list = data.data.list;
        this.timer();
      },
      data() {
        return {
          list: [],
          temp: null //倒计时初始
        };
      },
      methods: {
         timer() {
          //页面多个定时器 //主要逻辑都在这页面更新
          let _that = this;
          this.temp = setInterval(() => {
            this.list.forEach((item, index) => {
              item.dayTime = countDownFun(item.endAt);
              this.$set(this.list, item.dayTime, countDownFun(item.endAt));
            console.log(this.temp, "6");
            });
          }, 1000);
        },
      },
      destroyed() {
        //切记页面销毁需要销毁
        clearInterval(this.temp);
        console.log(this.temp, "销毁");
       }
    };
    </script>

  • 相关阅读:
    好玩的SQL
    Oracle常用函数
    树控件DeleteAllItems之前先SelectItem(NULL)
    MFC控件位置调整
    C++中一个0xC0000005访问冲突问题
    为MFC按钮添加各种图片
    LVN_ITEMCHANGED(OnItemchanged)通知响应多次的问题
    android 里边的mk文件的解析
    定义属于自己的标题栏
    block 影响代码执行由上往下执行顺序 从而影响功能的解决
  • 原文地址:https://www.cnblogs.com/shy0113/p/11351078.html
Copyright © 2011-2022 走看看