用Javascript做一個“獲取驗證碼”的按鈕

本文轉載自查看原文 2019-04-25 11:49 512 前端

要求：①點擊按鈕后背景色會發生改變
②有倒計時（一般為30秒）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>pro.html</title>
<style type="text/css">
.checkCode {
    cursor: pointer;
    border: 1px solid black;
    text-align: center;
    line-height: 26px;
    width: 115px;
    height: 35px;
}
</style>
<script type="text/javascript">
    var sleep = 30, interval = null;
    window.onload = function ()
    {
        var btn = document.getElementById ('btn');
        btn.onclick = function ()
        {
            if (!interval)
            {
                this.style.backgroundColor = 'rgb(243, 182, 182)';
                this.disabled = "disabled";
                this.style.cursor = "wait";
                this.value = "重新發送 (" + sleep-- + ")";
                interval = setInterval (function ()
                {
                    if (sleep == 0)
                    {
                        if (!!interval)
                        {
                            clearInterval (interval);
                            interval = null;
                            sleep = 30;
                            btn.style.cursor = "pointer";
                            btn.removeAttribute ('disabled');
                            btn.value = "免費獲取驗證碼";
                            btn.style.backgroundColor = '';
                        }
                        return false;
                    }
                    btn.value = "重新發送 (" + sleep-- + ")";
                }, 1000);
            }
        }
    }
</script>
</head>
<body>
    <input class="checkCode" type="button" id="btn" value="免費獲取驗證碼" />
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iOS點擊獲取短信驗證碼按鈕 vue獲取驗證碼使用Axure做驗證碼之獲取驗證碼（一） C#|窗體獲取系統時間、回車觸發按鈕事件、實現驗證碼功能 Vue：獲取驗證碼按鈕倒倒計時效果前端學習——ionic/AngularJs——獲取驗證碼倒計時按鈕獲取手機驗證碼按鈕的效果實現 javascript實現登錄驗證碼 JavaScript隨機四位驗證碼利用JavaScript破解驗證碼