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>

  • 相关阅读:
    js中 offset /client /scroll总结
    python的安装和环境配置
    git详解
    Xmind
    Linux 文件搜索命令
    Linux 文件和目录命令
    Linux 系统关机重启命令
    Linux系统信息命令
    Day07
    ModuleNotFoundError: No module named 'pysqlite2'
  • 原文地址:https://www.cnblogs.com/shy0113/p/11351078.html
Copyright © 2011-2022 走看看