MDUI
首页
注册

为啥会这样啊

SheepJun
2023-08-07 11:09:05

以下代码为什么里面的“获取验证码”按钮点了之后倒数完不会把文字改成重新“获取验证码”,这怎么改,是不是JS出了问题???

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui/dist/css/mdui.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mdui/dist/js/mdui.min.js"></script>
</head>
<body>
  <div class="mdui-container">
    <form class="mdui-card mdui-shadow-2 mdui-hoverable">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">注册</div>
      </div>
      <div class="mdui-card-content">
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">用户名</label>
          <input class="mdui-textfield-input" type="text" required>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">密码</label>
          <input class="mdui-textfield-input" type="password" required>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">确认密码</label>
          <input class="mdui-textfield-input" type="password" required>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">图形验证码</label>
          <input class="mdui-textfield-input" type="text" required>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">邮箱</label>
          <input class="mdui-textfield-input" type="email" required>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label">
          <label class="mdui-textfield-label">邮箱验证码</label>
          <input class="mdui-textfield-input" type="text" required>
          <button class="mdui-btn mdui-btn-raised mdui-ripple" id="get-verification-code">
            获取验证码
          </button>
        </div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-btn-raised mdui-color-theme-accent">注册</button>
      </div>
    </form>
  </div>
<script>
  var btn = document.getElementById('get-verification-code');
  var count = 1;
  var timer = null;

  btn.addEventListener('click', function() {
    if (timer) {
      return;
    }

    btn.disabled = true;
    timer = setInterval(function() {
      count--;
      if (count <= 0) {
        clearInterval(timer);
        timer = null;
        count = 1;
        btn.disabled = false;
        btn.innerHTML = "重新获取验证码";
      }
      btn.innerHTML = count + '秒后重新获取';
    }, 1000);
  });
</script>
</body>
</html>