javascript實現發送短信驗證碼案例

Posted on by

本文實例為大傢分享瞭javascript實現發送短信驗證碼的具體代碼，供大傢參考，具體內容如下

效果如下:

代碼思路:

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)
    })

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：