JS常用工具函数-倒计时

Bertha 。 2022-05-15 07:05 382阅读 0赞

倒计时是业务中常见需求，写一下**固定时间倒计时和指定结束时间倒计时**

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>倒计时</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="http://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    </head>
    <body>
      <div id="app">
        <div @click="countDown">{
       {codeText}}</div>
        <div :style="{color: isTimeCome&&'red'}" @click="runCutdown">{
       {endTimeText}}</div>
      </div>
      <script>
        new Vue({
          el: '#app',
          data() {
            return {
              codeText: '发送验证码',
              seconds: 60,
              spaceTime: {
                day: '--',
                hour: '--',
                minute: '--',
                second: '--',
              },
              endTime: '2019-09-03', //自定义结束时间
              isTimeCome: false
            }
          },
          computed: {
            endTimeText(){
              return `${this.spaceTime.day}天${this.spaceTime.hour}时${this.spaceTime.minute}分${this.spaceTime.second}秒`
            }
           },
          methods: {
            // 一分钟倒计时
            countDown() {
              this.timer = setInterval(() => {
                this.codeText = `${this.seconds--}s后重发`
                if (this.seconds <= 0) {
                  this.codeText = '重新发送'
                  clearInterval(this.timer)
                }
              }, 1000)
            },
            // 指定结束时间倒计时
            cutdown(endTime, callback) {
              // 兼容safari
              if (endTime.includes('-')) {
                endTime = endTime.replace(/-/g, '/');
              }
              let currentTime = (new Date()).getTime();
              let deadline = (new Date(endTime)).getTime();
              let space = deadline - currentTime;
              space = space / 1000;
              // 时间结束的回调
              space < 0 && callback && callback();
              return space < 0
                ? {
                  day: 0,
                  hour: 0,
                  minute: 0,
                  second: 0
                }
                : {
                  day: Math.floor(space / 60 / 60 / 24),
                  hour: Math.floor(space / 60 / 60 % 24),
                  minute: Math.floor(space / 60 % 60),
                  second: Math.floor(space % 60)
                };
            },
            // 开始倒计时
            runCutdown() {
              this.endTimer = setInterval(() => {
                this.spaceTime = this.cutdown(this.endTime, () => {
                  //倒计时为0时可触发操作
                  this.isTimeCome = true
                });
              }, 1000);
            },
          }
        })
      </script>
    </body>
    </html>