Vue 实现倒计时按钮功能

最新推荐文章于 2023-04-21 11:17:32 发布

_格鲁特宝宝

最新推荐文章于 2023-04-21 11:17:32 发布

阅读量695

点赞数

分类专栏： Vue Web FrontEnd 文章标签：倒计时 JavaScript 定时器前端交互按钮控制

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/114519312

版权

Web FrontEnd 同时被 2 个专栏收录

226 篇文章 5 订阅

订阅专栏

Vue

54 篇文章 2 订阅

订阅专栏

data() {
  return {
    isAvailable: true,
    totalTime: 2,  // 倒计时时间
    btnContent: '下一步',
    btnDefault: '下一步',
    clock: null,
  };
},

countDown() {
  if (!this.isAvailable) return;
  this.isAvailable = true;
  this.btnContent = `${this.btnDefault}(${this.totalTime})`;
  window.clearInterval(this.clock);
  this.clock = window.setInterval(() => {
    this.totalTime --;
    this.btnContent = `${this.btnDefault}(${this.totalTime})`;
    if (this.totalTime < 1) {
      window.clearInterval(this.clock);
      this.btnContent = this.btnDefault;
      this.isAvailable = false;
    }
  }, 1000);
},