验证码的定时器

zhazhali_fenqi

于 2022-01-12 19:33:07 发布

阅读量188

点赞数

分类专栏：前端学习文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/zhazhali_fenqi/article/details/122460661

版权

前端学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

运行效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 网页时钟</title>
  <style>
    body {
      padding: 40px;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    li {
      margin: 10px 0;
      line-height: 26px;
      display: flex;
    }

    input,
    button {
      padding: 0;
      margin-left: 10px;
      display: block;
    }

    input {
      width: 190px;
      outline: none;
    }

    button {
      width: 120px;
    }

    .verify {
      width: 60px;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      手机号:
      <input type="text">
    </li>
    <li>
      验证码:
      <input type="text" class="verify">
      <button id="btn">获取验证码</button>
    </li>
  </ul>

  <script>
    let btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      this.disabled = true
      let i = 5
      btn.innerHTML = `${i}秒之后重新获取`
      let timer = setInterval(function () {
        i--
        btn.innerHTML = `${i}秒之后重新获取`
        if (i < 0) {
          clearInterval(timer)
          btn.innerHTML = '获取验证码'
          btn.disabled = false
        }
      }, 1000)
    })
  </script>
</body>

</html>

zhazhali_fenqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证码的定时器

运行效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习 - 网页时钟</title> <style> body { padding:
复制链接

扫一扫

专栏目录