vue+js 实现倒计时，鼠标移动停止，无操作自动倒计时

整体功能

1、刚进入页面时、自动开始倒计时
2、当用户有按键盘、鼠标点击、鼠标滚轮、鼠标移动时，停止倒计时
3、停止鼠标事件等，重新开始倒计时。（这里写的不好，还是从最开始的事件重新减的）

倒计时代码

for (let i = 0; i < 1000; i++) {
      clearInterval(i);
      clearTimeout(i);
    }
    (function ($) {
      var funObj = {
        timeUserFun: "timeUserFun",
      };
      $[funObj.timeUserFun] = function (time) {
        var time = time || 2;
        var userTime = time * 10;
        var objTime = {
          init: 0,
          time: function () {
            objTime.init += 1;
            if (objTime.init == userTime) {
              for (let i = 0; i < 1000; i++) {
                clearInterval(i);
                clearTimeout(i);
              }
              console.log("时间到");
              timeUserFun(1);
            }
            console.log(111111, objTime.init);
          },
      eventFun: function () {
        clearInterval(testUser);
        objTime.init = 0;
        testUser = setInterval(objTime.time, 1000);
      },
        };
        var testUser = setInterval(objTime.time, 1000);
    var body = document.querySelector("html");
    body.addEventListener("click", objTime.eventFun);
    body.addEventListener("keydown", objTime.eventFun);
    body.addEventListener("mousemove", objTime.eventFun);
    body.addEventListener("mousewheel", objTime.eventFun);
      };
    })(window);
    timeUserFun(1);

完整代码

这是我写的是一个专门倒计时的组件，倒计时结束后跳首页

<template>
  <!-- 倒计时组件 -->
  <div class="count">
    <span id="secs"></span><span>秒后 返回主页面</span>
    <span class="back" @click="returnback" v-show="showbtn">&lt; 主页面</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sec: "",
      settime: "",
      Listener: false,
    };
  },
  props: {
    num: {
      type: [Number, String],
      default: 35,
    },
    showbtn: {
      type: Boolean,
      default: true,
    },
    isstart: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    isstart(val, oldval) {
      if (val === true) {
        this.listen(this.sec);
      } else {
        this.listen(this.sec);
      }
    },
  },
  methods: {
    returnback() {
      this.$router.push({ path: "home" });
    },
    listen(time) {
      for (let i = 0; i < 1000; i++) {
        clearInterval(i);
        clearTimeout(i);
      }
      (function ($) {
        var funObj = {
          timeUserFun: "timeUserFun",
        };

        $[funObj.timeUserFun] = function (time) {
          var time = time;
          var userTime = time;

          var objTime = {
            init: 0,
            time: function () {
              objTime.init += 1;
              document.querySelector("#secs").innerHTML = time - objTime.init;
              if (objTime.init == userTime) {
                console.log("还剩0秒，返回首页");
                for (let i = 0; i < 1000; i++) {
                  clearInterval(i);
                  clearTimeout(i);
                }
                window.location.href = "home";
                return;
              }
            },

            eventFun: function () {
              clearInterval(testUser);
              objTime.init = 0;
              testUser = setInterval(objTime.time, 1000);
              if (this.isstart == false) {
                clearInterval(testUser);
              }
            },
          };
          var testUser = setInterval(objTime.time, 1000);
          var body = document.querySelector("html");

          body.addEventListener("click", objTime.eventFun);
          body.addEventListener("keydown", objTime.eventFun);
          body.addEventListener("mousemove", objTime.eventFun);
          body.addEventListener("mousewheel", objTime.eventFun);
        };
      })(window);
      if (this.isstart === true) {
        timeUserFun(time);
      }
    },
  },
  mounted() {
    this.sec = this.num;
    // this.settime = setInterval(() => {
    //   if (this.sec > 0 && this.isstart === true) {
    //     this.sec -= 1;
    //   } else if (this.sec > 0 && this.isstart === false) {
    //     clearInterval(this.settime);
    //     this.sec = this.num;
    //   } else {
    //     clearInterval(this.settime);
    //     this.returnback();
    //   }
    // }, 1000);
    this.listen(this.sec);
  },

  beforeDestroy() {
    clearInterval(this.settime);
  },
};
</script>
<style lang="less" scoped>
.count {
  position: absolute;
  right: 0;
  top: 0.36rem;
  color: #5f7585;
  font-size: 0.16rem;
  span {
    font-size: 0.16rem;
  }
  .back {
    background-color: #3277ff;
    margin-left: 0.24rem;
    color: #fff;
    padding: 0.12rem 0.21rem;
    border-radius: 0.8rem;
  }
  .back:active {
    background: #215cd1;
  }
}
</style>

分析

（1）对页面进行监听，一触发就执行倒计时的函数

    var body = document.querySelector("html");
    body.addEventListener("click", objTime.eventFun);
    body.addEventListener("keydown", objTime.eventFun);
    body.addEventListener("mousemove", objTime.eventFun);
    body.addEventListener("mousewheel", objTime.eventFun);

倒计时的函数
mounted()先执行了一次，相当于默认开始倒计时
注意这里的objTime.init是每次都将初始值变为0，重新进行倒计时，实现每次触发后重新回到原来的时间倒计时

          eventFun: function () {
            clearInterval(testUser);
            objTime.init = 0;
            testUser = setInterval(objTime.time, 1000);
          },

（2）这是主体，
注意这里，是每隔一秒执行一次这个函数，然后将倒计时的数字，document.querySelector("#secs").innerHTML 实时写在页面上。

testUser = setInterval(objTime.time, 1000);

注意一定要及时使用clearInterval（）

          var objTime = {
            init: 0,
            time: function () {
              objTime.init += 1;
              document.querySelector("#secs").innerHTML = time - objTime.init;
              if (objTime.init == userTime) {
                console.log("还剩0秒，返回首页");
                for (let i = 0; i < 1000; i++) {
                  clearInterval(i);
                  clearTimeout(i);
                }
                window.location.href = "home";
                return;
              }
            },

效果