js模拟手机验证码倒计时

最新推荐文章于 2022-08-17 01:37:44 发布

望江盼船

最新推荐文章于 2022-08-17 01:37:44 发布

阅读量221

点赞数 2

分类专栏：前端文章标签： js 手机验证码倒计时

本文链接：https://blog.csdn.net/weixin_40136114/article/details/99864432

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取验证码</title>
</head>
<body>
<button id="btn">获取验证码</button>
<script>
    //获取元素对象
    var btn = document.getElementById("btn");
    var second=59;
    var time;
    //操作元素对象(绑定点击事件)
    btn.onclick=function () {
        //禁用按钮
        btn.disabled=true;
        //使用计时器,开始倒计时,每秒钟执行一次程序,修改剩余秒数
        time=setInterval(fun,1000);
    };

    //每秒都会执行这个函数
    function fun(){
        btn.innerHTML=second+"秒后再次获取验证码";
        if (second==0){
            //一分钟倒计时结束后,修改按钮的状态为可用状态,并重新设置时间
            second=60;
            btn.innerHTML="再次获取验证码";
            btn.disabled=false;
            //取消定时器
            clearInterval(time);
        }
        second--;
    };
</script>
</body>
</html>

望江盼船

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js模拟手机验证码倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取验证码</title></head><body><button id="btn">获取验证码</button>&...
复制链接

扫一扫