简单验证码倒计时

最新推荐文章于 2025-05-14 21:02:45 发布

jontyy

最新推荐文章于 2025-05-14 21:02:45 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web组件

本文链接：https://blog.youkuaiyun.com/YJD19970908/article/details/81668162

web组件专栏收录该内容

12 篇文章

订阅专栏

验证码倒计时

Introduce

平时注册app的时候，登陆一些网站的时候，银行付钱的时候，是不是经常会见到发送验证码的图片呢？点击一下，就从发送验证码变成，60秒倒计时，60秒之后再次发送，是不是很普通，今天就来做一个验证码的demo

Idea

明确一下需要实现的功能

本身的文字是发送验证码，可以点击
点击发送，变成倒计时，每秒刷新一次，倒计时途中，禁止再次点击
倒计时归零，可以再次点击，并再次发送验证码

Tools

vscode
chrome

Code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .get_yzm {
            color: #fff;
            width: 200px;
            height: 1.333333rem/* 100/75 */
            ;
            line-height: 1.333333rem/* 100/75 */
            ;
            font-weight: 700;
            background: #f54411;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="get_yzm">获取验证码</div>
    <script>
        //验证码倒计时
        function SetRemainTime() {
            var yzm = document.getElementsByClassName("get_yzm")[0]
            if (curCount == 0) {
                window.clearInterval(InterValObj); //停止计时器
                yzm.style['pointer-events'] = 'auto';
                yzm.innerHTML = "重新发送验证码";
            } else {
                curCount--;
                yzm.innerHTML = "验证码(" + curCount + ")";
            }
        }
        document.getElementsByClassName("get_yzm")[0].addEventListener("click", function () {
            curCount = 60;　　 //设置button效果，开始计时
            this.innerHTML = "验证码(" + curCount + ")" ;
            this.style['pointer-events'] = 'none';
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        })
    </script>
</body>

</html>

Show

重新发送

验证码

writer&contact

{
  "name":"Jontyy" , 
  "email": " jontyy@163.com"
}

gitHub

https://github.com/YJD199798