有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

原生js实现验证码输入倒计时

javascript 炮渣日记 2个月前 (12-19) 47次浏览 已收录 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 myBtn = document.querySelector(‘#btn’);
        let timer;
        myBtn.addEventListener(‘click’, function () {
            myBtn.Disabled = true
            let time = 3;
            function MyFn() {
                time–;
                myBtn.innerHTML = `${time}秒之后重新获取`;
                if (time < 0) {
                    clearInterval(timer)
                    myBtn.innerHTML = `获取验证码`;
                    myBtn.Disabled = false;
                }
            }
            MyFn()
            timer = setInterval(MyFn, 1000)
        })
    </script>
</body>
</html>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址