获取倒计时，怎么做？

最新推荐文章于 2024-09-17 11:42:54 发布

aiXianRen

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量135

点赞数 3

分类专栏： vue小功能文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/aiXianRen/article/details/118096976

版权

vue小功能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue.js中实现点击获取验证码按钮后启动倒计时功能。通过设置`isCountDown`状态和使用`setInterval`定时器更新倒计时文本，当倒计时结束后恢复原始文本并重置计数器。代码中包含模板、逻辑和样式部分，详细解释了整个过程。

摘要由CSDN通过智能技术生成

效果图

结构

<template>
  <div>
    <h3>获取验证码倒计时怎么做？</h3>
    <div class="phone">
      <input type="text" />
      <span @click="getCode" :style="{ color: isCountDown ? 'red' : '#000' }">
        {{ codeText }}
      </span>
    </div>
  </div>
</template>

逻辑

<script>
export default {
  data () {
    return {
      count: 10, // 总时长，
      isCountDown: false, // 是否在倒计时
      codeText: '获取验证码',
      timer: -1
    }
  },
  methods: {
    getCode () {
      // 正常倒计时 , 不往下执行
      if (this.isCountDown) return

      // 开始倒计时
      this.isCountDown = true
      this.timer = setInterval(() => {
        this.codeText = `${this.count--}秒后获取`
        // 定时器 ， 临界点停止
        if (this.count === 0) {
          clearInterval(this.timer)
          this.count = 10
          this.codeText = '获取验证码'
          this.isCountDown = false
        }
      }, 1000)
    }
  }
}
</script>

样式

<style>
.phone {
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
}
span {
  display: inline-block;
  border: 1px solid rebeccapurple;
  padding: 8px;
  border-radius: 8px;
}
</style>