javascript如何實現(xiàn)發(fā)送短信驗證碼

這篇文章主要介紹“javascript如何實現(xiàn)發(fā)送短信驗證碼”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“javascript如何實現(xiàn)發(fā)送短信驗證碼”文章能幫助大家解決問題。

效果如下:

代碼思路:

1.按鈕點擊之后，會禁用disabled 為true
2.同時按鈕里面的內(nèi)容會變化，注意button里面的內(nèi)容通過innerHTML修改里面秒數(shù)         是有變化的，因此需要用到定時器
3.定義一個變量，在定時器里面，不斷遞減
4.如果變量為0說明到了時間，我們需要停止定時器，并且復(fù)原按鈕初始狀態(tài)。

html部分

<div>
        <input type="tel" placeholder="驗證碼"><button>發(fā)送</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) {
                // 清除定時器和復(fù)原按鈕
                btn.disabled = false;
                clearInterval(timer);
                btn.innerHTML = "發(fā)送";
                time = 10; //這個10需要重新開始
            } else {
                btn.innerHTML = time + "s"
                time--;
            }
 
        }, 1000)
    })

關(guān)于“javascript如何實現(xiàn)發(fā)送短信驗證碼”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。