vue点击按钮倒计时代码演示

如何用Vue实现计时器按钮？

根据实现效果，我们需要三个按钮：开始、重置、暂停，还需要一个计时器显示计时结果。下面是Vue代码：

vue点击按钮倒计时代码演示

  <template>
    <div>
      <div class="timeContainer">{{ time }}</div>
      <a-button style="margin-right: 20px" type="primary" @click="start">开始</a-button>
      <a-button style="margin-right: 20px" type="primary" @click="reset">重置</a-button>
      <a-button type="primary" @click="end">暂停</a-button>
    </div>
  </template>

我们需要在methods中定义三个函数：start、reset、end，并绑定到对应的按钮上。

Vue计时器实现方法

我们需要定义data中的一些变量，如：flag是否启动计时器、hour、minute、second表示小时、分钟和秒数、time表示计时结果。然后我们在start方法中使用setInterval来启动计时器，并且可以在每秒钟的回调函数中更新time、秒、分钟和小时。reset方法用来清空计时器，设置hour、minute、second为0并且更新time为“00:00:00”，而end方法用来暂停计时器。

  <script>
    export default {
      data() {
        return {
          flag: null,
          hour: 0,
          minute: 0,
          second: 0,
          time: "00:00:00",
        };
      },
      methods: {
        start() {
          this.flag = setInterval(() => {
            this.second = this.second + 1;
            if (this.second >= 60) {
              this.second = 0;
              this.minute = this.minute + 1;
            }
            if (this.minute >= 60) {
              this.minute = 0;
              this.hour = this.hour + 1;
            }
            this.time =
              this.complZero(this.hour) +
              ":" +
              this.complZero(this.minute) +
              ":" +
              this.complZero(this.second);
          }, 1000);
        },
        reset() {
          window.clearInterval(this.flag);
          this.hour = 0;
          this.minute = 0;
          this.second = 0;
          this.time = "00:00:00";
        },
        end() {
          this.flag = clearInterval(this.flag);
        },
        complZero(n) {
          return n < 10 ? "0" + n : "" + n;
        },
      },
    };
  </script>

计时器显示样式

最后，我们为计时器结果添加了一些样式，如增大字体和设置下边距。

  <style>
    .timeContainer {
      font-size: 40px;
      margin-bottom: 10px;
    }
  </style>

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7172.html

vue点击按钮倒计时代码演示

如何用Vue实现计时器按钮？

Vue计时器实现方法

计时器显示样式

相关推荐