以下是使用Vue编写的倒计时代码,显示格式为1:59:

<template>
  <div>
    {{ minutes }}:{{ seconds }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      minutes: 1,
      seconds: 59,
      timer: null
    };
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
        } else {
          if (this.minutes > 0) {
            this.minutes--;
            this.seconds = 59;
          } else {
            clearInterval(this.timer);
          }
        }
      }, 1000);
    }
  }
};
</script>

在上述代码中,我们使用minutesseconds两个变量分别表示倒计时的分钟和秒数。在startTimer方法中,我们使用setInterval函数以每秒钟的间隔来更新倒计时的时间。当秒数大于0时,我们将秒数减1;当秒数为0时,我们检查分钟数是否大于0,如果是,则将分钟数减1,同时将秒数重置为59;如果分钟数也为0,则清除计时器。

请将上述代码保存为一个Vue组件,然后在需要使用倒计时的地方引入并使用该组件。


原文地址: https://www.cveoy.top/t/topic/pKZ6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录