vue实现点击按钮倒计时

下面我就为你讲解“Vue实现点击按钮倒计时”的完整攻略。

前置知识：Vue的生命周期函数

实现倒计时需要对Vue的生命周期函数有一定的了解。常用的生命周期函数有 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed。其中，mounted 函数在组件挂载到页面上后执行，我们可以在这个函数中运行倒计时逻辑。

实现步骤

1.在Vue组件中设置倒计时的初始时间和状态。一般来说，我们需要设置开始时的时间、倒计时的总时长（单位为秒）、倒计时的状态（是否正在倒计时）等变量。

data() {
  return {
    time: '00:00:00',
    totalTime: 60, // 总时长
    isTiming: false // 是否正在倒计时
  }
}

2.通过以下方法实现倒计时逻辑：

• 在 mounted 方法中运行倒计时函数。
• 定义一个 countdown 函数，其中判断当前倒计时状态是否为正在倒计时，如不是则返回。如是，则根据当前时间和时间差计算出倒计时剩余时间，并进行展示。当倒计时结束后，将倒计时状态设置为 false，停止倒计时。

mounted() {
  this.countdown(this.totalTime);
}

methods: {
  countdown(totalTime) {
    if (!this.isTiming) {
      return;
    }
    setTimeout(() => {
      totalTime--;
      const minute = Math.floor(totalTime / 60);
      const second = totalTime % 60;
      this.time = `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
      if (totalTime === 0) {
        this.isTiming = false;
      } else {
        this.countdown(totalTime);
      }
    }, 1000);
  }
}

3.点击按钮实现倒计时状态的转变。在按钮的点击事件中，通过设置倒计时状态来完成状态之间的转变。如果当前倒计时状态为 false，点击按钮后将状态改为 true，开始倒计时。如果当前状态为 true，点击按钮后将状态改为 false，停止倒计时。

<button @click="isTiming = !isTiming">{{isTiming ? '停止倒计时' : '开始倒计时'}}</button>

示例1：简单的倒计时

下面是一个简单的倒计时实现，界面只展示了当前的倒计时时刻和一个按钮，用来启动或停止倒计时。在没有倒计时的时候，时钟的时间是 00:00:00，按钮显示 “开始倒计时”。当点击按钮后，按钮文字变成 “停止倒计时”，并开始倒计时。在倒计时进行中，时钟的数字会随之变化；当倒计时结束后，时钟的数字停止变化，按钮文字变成 “开始倒计时”。

<template>
  <div>
    <div class="time">{{time}}</div>
    <button @click="isTiming = !isTiming">{{isTiming ? '停止倒计时' : '开始倒计时'}}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '00:00:00',
      totalTime: 60,
      isTiming: false
    }
  },
  mounted() {
    this.countdown(this.totalTime);
  },
  methods: {
    countdown(totalTime) {
      if (!this.isTiming) {
        return;
      }
      setTimeout(() => {
        totalTime--;
        const minute = Math.floor(totalTime / 60);
        const second = totalTime % 60;
        this.time = `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
        if (totalTime === 0) {
          this.isTiming = false;
        } else {
          this.countdown(totalTime);
        }
      }, 1000);
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 30px;
  text-align: center;
  margin: 30px 0;
}
button {
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #42b983;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
button:hover {
  background-color: #26a69a;
}
</style>

示例2：支持设置倒计时的总时间

在这个示例中，我们可以通过输入框设置倒计时的总时间。在运行倒计时过程中无法更改倒计时的总时间。当倒计时结束后，系统会弹出一个提醒框，提示用户倒计时已结束。

<template>
  <div>
    <div class="time">{{time}}</div>
    <div>
      <span>倒计时时间：</span>
      <input type="number" v-model="totalTime" :disabled="isTiming" />
    </div>
    <button @click="isTiming = !isTiming">{{isTiming ? '停止倒计时' : '开始倒计时'}}</button>
    <div class="modal-mask" v-if="!isTiming">
      <div class="modal-container">
        <div class="modal-header">提示</div>
        <div class="modal-body">倒计时已结束！</div>
        <div class="modal-footer">
          <button @click="isTiming = true">重新开始</button>
          <button @click="closeModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '00:00:00',
      totalTime: 60,
      isTiming: false
    }
  },
  mounted() {
    this.countdown(this.totalTime);
  },
  methods: {
    countdown(totalTime) {
      if (!this.isTiming) {
        return;
      }
      setTimeout(() => {
        totalTime--;
        const minute = Math.floor(totalTime / 60);
        const second = totalTime % 60;
        this.time = `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
        if (totalTime === 0) {
          this.isTiming = false;
        } else {
          this.countdown(totalTime);
        }
      }, 1000);
    },
    closeModal() {
      this.totalTime = 60;
      this.time = '00:00:00';
    }
  },
  watch: {
    totalTime(val) {
      this.totalTime = parseInt(val) || 0;
      if (this.totalTime < 0) {
        this.totalTime = 0;
      }
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 30px;
  text-align: center;
  margin: 30px 0;
}
div {
  margin-bottom: 10px;
}
button {
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #42b983;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
button:hover {
  background-color: #26a69a;
}
input {
  font-size: 16px;
  padding: 10px 15px;
  border-radius: 5px;
  outline: none;
  border: none;
  transition: background-color 0.3s ease-in-out;
}
input:disabled {
  background-color: #ddd;
}
.modal-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-container {
  width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.modal-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-footer button {
  font-size: 16px;
  padding: 10px 15px;
  margin: 0 10px;
  border-radius: 5px;
  background-color: #42b983;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.modal-footer button:hover {
  background-color: #26a69a;
}
</style>

这是一个更为完备的倒计时示例，你可以根据自己的需求进行相应的改造。希望我的回答对你有所帮助！