發送驗證碼倒計時JS

注冊或驗證常用發送驗證碼效果,以下提供完整代碼,供參考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>發送驗證碼</title>
    <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
</head>
<style>
    button {
        border: 0;
    }
    #sendYzm {
        display: block;
        width: 90px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 13px;
        background: #ff7320;
        color: #fff;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        cursor: pointer;
        margin: 0;
    }
    #sendYzm.disabled {
         background: #eee;
         color: #394263;
     }
</style>
<body>


<button type="button" onclick="run()" id="sendYzm" class>發送驗證碼</button>

<script>
  // 發送驗證碼倒計時60s
  var btn = document.getElementById("sendYzm");
  function run(){
    var time = 60;//定義時間變量。用于倒計時用
    var timer = null;//定義一個定時器;
    timer = setInterval(function(){///開啟定時器。函數內執行
      btn.disabled = true;
      btn.classList.add("disabled");
      btn.innerText = time+"秒";    //點擊發生后,按鈕的文本內容變成之前定義好的時間值。
      time--;//時間值自減
      if(time ==0){     //判斷,當時間值小于等于0的時候
        btn.innerText='重新發送'; //其文本內容變成……點擊重新發送……
        btn.disabled = false;
        btn.classList.remove("disabled");
        clearInterval(timer); //清除定時器
      }
    },1000)

  }
</script>
</body>
</html>

未經允許不得轉載:小網站 » 發送驗證碼倒計時JS

贊 (0)

評論 0

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
丧尸之战2丧尸来袭电影
360时时彩走势图 尊尚豪庭娱乐会所 西甲赛程 三肖6码网站 下载麻将游戏免费四人 老11选5快彩乐 足彩计算器胜平负 3d定位投注价格表 pt游戏平台pt游戏平台 金星彩票是正规的吗 重庆老时时彩 十一选五复式投注价格 北京pk10骗局全过程 11选五复式投注表 骰子单双玩法 赛车pk10官网开奖结果