【前端案例】12 - 案例：发送短信倒计时

1. 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。

分析

1. 按钮点击之后，需要将按钮设置为禁用状态。 disabled = true;

2. 同时按钮里面的内容有变化，注意button里面的内容会通过innerHtml进行修改。

3. 里面的秒数是有变化的。因此需要一个定时器。

4. 定义一个变量，在定时器中，不断的进行递减。

5. 当时间变量减为 0 时需要将按钮重置为可用状态，将时间恢复。

<label for="phone">
  手机号码:
  <input type="text" id="phone">
  <button>发送</button>
</label>

  let btn = document.querySelector('button');
  let time = 10;
  btn.addEventListener('click', function () {
    let timer = setInterval(function () {
      if (time === 0) {
        // 清除定时器
        clearInterval(timer);
        btn.innerHTML = '发送';
        btn.disabled = false;
        time = 10; // 这一步很重要一定将时间恢复
      } else {
        time--;
        btn.disabled = true;
        btn.innerHTML = '还剩' + time + '秒重新发送';
      }
    }, 1000);
  });