JS 实现发送验证码效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            height: 50px;
            font-size: 18px;
            line-height: 50px;
            color: #fff;
            background: red;
        }
    </style>
</head>
<body>
    <button>发送验证码</button>
    <script>
        //1.获取元素
        var btn = document.getElementsByTagName("button")[0];
        //4.声明一个状态变量  记录按钮的状态
        var flag = "active";
        
        //2.添加点击事件
        btn.onclick = function(){
            //将倒计时的变量 声明在点击事件中  这样每次点击之后 就可以将变量的值重置
            var n = 10;
            //3.按钮存在两种状态  激活态  禁用态
            //如果是激活态
            if(flag == "active"){
                //让按钮 背景变灰， 内容换成 已发送(ns后重新发送)
                btn.style.background = "gray";
                btn.innerHTML = "已发送("+n+"s后重新发送)";
                //修改状态
                flag = "disabled";
                //设置间歇定时器 进行倒计时
                var timer = setInterval(function(){
                    n--;
                    if(n<0){
                        clearInterval(timer);
                        //将 内容 重新改回 发送验证码
                        btn.innerHTML = "发送验证码";
                        btn.style.cssText = "";//干掉行内样式 重新使用 非行内样式
                        //改回来 状态
                        flag = "active";
                        //阻断函数的执行
                        return false;
                    }
                    btn.innerHTML = "已发送("+n+"s后重新发送)";
                },1000) 
            }
            else{//如果是禁用态
                return false;
            }
        }
    </script>
</body>
</html>

 

posted @ 2020-09-17 09:38  石海莹  阅读(561)  评论(0)  编辑  收藏  举报