WebAPI（验证码倒计时小案例）

最新推荐文章于 2023-09-22 15:34:41 发布

李晨飞_

最新推荐文章于 2023-09-22 15:34:41 发布

阅读量172

点赞数

分类专栏： WebAPI 文章标签： javascript

本文链接：https://blog.csdn.net/m0_59878114/article/details/119148008

版权

WebAPI 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<body>
  <ul>
    <li>
      手机号:
      <input type="text">
    </li>
    <li>
      验证码:
      <input type="text" class="verify">
      <button id="btn">获取验证码</button>
    </li>
  </ul>
<script type="text/javascript">
    //先获取这个按钮
    let btn = document.getElementById('btn')

    //让这个按钮产生点击事件
    btn.addEventListener('click', function () {
      //定义一个变量，让他获取秒数
      let i = 5
      //禁用，不让点击
      btn.disabled = true
      btn.innerHTML = `${i}秒后重新获取`

      // 赋值给变量timer，提供clearInterval关闭
      //           启用定时器
      let timer = setInterval(function () {
        //让i没走1秒就减1
        i--
        //禁用，不让点击
        btn.disabled = true
        btn.innerHTML = `${i}秒后重新获取`
        //判断，如果i=0，就让这个按钮重新显示获取验证码，关闭定时器，并把禁用点击取消
        if (i === 0) {
          //clearInterval(timer)关闭时传的是启用定时器的名
          clearInterval(timer)
          btn.innerHTML = `获取验证码`
          btn.disabled = false
        }
      }, 1000)
    })
  </script>
</body>

李晨飞_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI（验证码倒计时小案例）

<body> <ul> <li> 手机号: <input type="text"> </li> <li> 验证码: <input type="text" class="verify"> <button id="btn">获取验证码</button> </li> </ul>&l.
复制链接

扫一扫