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>

  • 相关阅读:
    bzoj1083: [SCOI2005]繁忙的都市 瓶颈生成树
    Codeforces Round #344 (Div. 2)C. Report
    Wannafly挑战赛14E无效位置
    Codeforces Round #378 (Div. 2)F
    1059: [ZJOI2007]矩阵游戏 二分图匹配
    Educational Codeforces Round 42 (Rated for Div. 2)F
    bzo1016: [JSOI2008]最小生成树计数
    bzoj1009: [HNOI2008]GT考试 ac自动机+矩阵快速幂
    bzoj1070: [SCOI2007]修车
    table表格frame属性
  • 原文地址:https://www.cnblogs.com/shy0113/p/11351078.html
Copyright © 2011-2022 走看看