js實(shí)現(xiàn)簡(jiǎn)單的獲取驗(yàn)證碼按鈕效果

更新時(shí)間：2017年03月03日 14:06:35 作者：曾阿牛

本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的獲取驗(yàn)證碼按鈕加效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

圖（1）初始圖

圖（2）點(diǎn)擊后

代碼如下：

<!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 = "重新發(fā)送 (" + sleep-- + ")";
        interval = setInterval (function ()
        {
          if (sleep == 0)
          {
            if (!!interval)
            {
              clearInterval (interval);
              interval = null;
              sleep = 30;
              btn.style.cursor = "pointer";
              btn.removeAttribute ('disabled');
              btn.value = "免費(fèi)獲取驗(yàn)證碼";
              btn.style.backgroundColor = '';
            }
            return false;
          }
          btn.value = "重新發(fā)送 (" + sleep-- + ")";
        }, 1000);
      }
    }
  }
</script>
</head>
<body>
  <input class="checkCode" type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" />
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JS解析url查詢參數(shù)的簡(jiǎn)單代碼
本文通過簡(jiǎn)單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-08-08
JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
基于Bootstrap表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
javascript 函數(shù)的暫停和恢復(fù)實(shí)例詳解
這篇文章主要介紹了javascript 函數(shù)的暫停和恢復(fù),結(jié)合實(shí)例形式詳細(xì)分析了javascript 函數(shù)的暫停和恢復(fù)相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法,涉及javascript針對(duì)LI列表動(dòng)態(tài)排序的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
Javascript中click與blur事件的順序詳析
這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以下面來一起看看吧。
2017-04-04
JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下
2019-02-02
Javascript前端UI框架Kit使用指南之kitjs事件管理
本文詳細(xì)介紹了Kitjs的事件管理功能，包括普通的Dom事件、Kit如何解決問題、代碼解析、注銷事件等。需要的朋友可以參考下。
2014-11-11
JS CSS文章查看系統(tǒng)
自己寫了個(gè)JS+CSS的小東西，用來看提升用戶體驗(yàn)的。 Name：WindowsTextShow；
2008-12-12
使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個(gè)由百度開源的強(qiáng)大、靈活的 JavaScript 圖表庫,用于在 Web 頁面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強(qiáng)大的配置選項(xiàng)和良好的跨平臺(tái)兼容性,本文介紹了如何使用ECharts進(jìn)行數(shù)據(jù)可視化,需要的朋友可以參考下
2024-08-08