javascript小案例-----发送短信验证码案例

效果如下:

代码思路:

1.     1.按钮点击之后，会禁用disabled 为true
2.     2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改里面秒数         是有变化的，因此需要用到定时器
3.     3.定义一个变量，在定时器里面，不断递减
4.     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)
    })