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>

  • 相关阅读:
    2. Add Two Numbers
    1. Two Sum
    leetcode 213. 打家劫舍 II JAVA
    leetcode 48. 旋转图像 java
    leetcode 45. 跳跃游戏 II JAVA
    leetcode 42. 接雨水 JAVA
    40. 组合总和 II leetcode JAVA
    24. 两两交换链表中的节点 leetcode
    1002. 查找常用字符 leecode
    leetcode 23. 合并K个排序链表 JAVA
  • 原文地址:https://www.cnblogs.com/shy0113/p/11351078.html
Copyright © 2011-2022 走看看