js发送短信验证码

时间:2022-09-08 Favour72 人气:0

效果如下:

代码思路:

1.按钮点击之后，会禁用disabled 为true
2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改里面秒数是有变化的，因此需要用到定时器
3.定义一个变量，在定时器里面，不断递减
4.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

html部分

<div>
        <input type="tel" placeholder="验证码"><button>发送</button>
</div>

css部分:

div {
            width: 570px;
            height: 200px;
            margin: 200px auto;
            font-size: 22px;
        }
 
        input {
            float: left;
            width: 180px;
            height: 25px;
            outline: none;
            border: 1px solid pink;
            padding-left: 10px;
        }
 
        button {
            float: left;
            width: 60px;
            height: 29px;
            line-height: 29px;
            outline: none;
            border: 1px solid pink;
        }

javascript部分

let btn = document.querySelector("button");
let time = 10;
btn.addEventListener('click', function () {
        btn.disabled = true;
 
        let timer = setInterval(function () {
            if (time == 0) {
                // 清除定时器和复原按钮
                btn.disabled = false;
                clearInterval(timer);
                btn.innerHTML = "发送";
                time = 10; //这个10需要重新开始
            } else {
                btn.innerHTML = time + "s"
                time--;
            }
 
        }, 1000)
    })

加载全部内容