欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年03月03日 14:06:35   作者：曾阿牛  
本文主要介紹了js實(shí)現(xiàn)簡單的獲取驗(yàn)證碼按鈕加效果的實(shí)例，具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

圖（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>

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

相關(guān)文章

  • JS解析url查詢參數(shù)的簡單代碼

    JS解析url查詢參數(shù)的簡單代碼

    本文通過簡單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式 ，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
    2017-08-08
  • JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計時

    JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計時

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-03-03
  • 基于Bootstrap表單驗(yàn)證功能

    基于Bootstrap表單驗(yàn)證功能

    這篇文章主要為大家詳細(xì)介紹了基于Bootstrap表單驗(yàn)證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • javascript 函數(shù)的暫停和恢復(fù)實(shí)例詳解

    javascript 函數(shù)的暫停和恢復(fù)實(shí)例詳解

    這篇文章主要介紹了javascript 函數(shù)的暫停和恢復(fù),結(jié)合實(shí)例形式詳細(xì)分析了javascript 函數(shù)的暫停和恢復(fù)相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法

    JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法,涉及javascript針對LI列表動態(tài)排序的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-08-08
  • Javascript中click與blur事件的順序詳析

    Javascript中click與blur事件的順序詳析

    這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價值，需要的朋友可以下面來一起看看吧。
    2017-04-04
  • JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例

    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事件管理

    Javascript前端UI框架Kit使用指南之kitjs事件管理

    本文詳細(xì)介紹了Kitjs的事件管理功能，包括普通的Dom事件、Kit如何解決問題、代碼解析、注銷事件等。需要的朋友可以參考下。
    2014-11-11
  • JS CSS文章查看系統(tǒng)

    JS CSS文章查看系統(tǒng)

    自己寫了個JS+CSS的小東西，用來看提升用戶體驗(yàn)的。 Name：WindowsTextShow；
    2008-12-12
  • 使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解

    使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解

    ECharts 是一個由百度開源的強(qiáng)大、靈活的 JavaScript 圖表庫,用于在 Web 頁面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強(qiáng)大的配置選項和良好的跨平臺兼容性,本文介紹了如何使用ECharts進(jìn)行數(shù)據(jù)可視化,需要的朋友可以參考下
    2024-08-08

最新評論