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中事件對(duì)象和事件委托的介紹
今天小編就為大家分享一篇關(guān)于js中事件對(duì)象和事件委托的介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
利用Three.js實(shí)現(xiàn)3D三棱錐立體特效
Three.js是基于原生WebGL封裝運(yùn)行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。本文將用Three.js實(shí)現(xiàn)3D三棱錐立體特效，感興趣的可以了解一下
2022-06-06
用ES6的class模仿Vue寫一個(gè)雙向綁定的示例代碼
本篇文章主要介紹了用ES6的class模仿Vue寫一個(gè)雙向綁定的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
Bootstrap基本組件學(xué)習(xí)筆記之面板(14)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之面板,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的示例
for...in?、?for...of?和?forEach?都是用于循環(huán)遍歷集合元素的方法,但它們之間有一些重要的區(qū)別,本文通過實(shí)例代碼介紹JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的相關(guān)知識(shí),感興趣的朋友一起看看吧
2023-09-09
自定義事件解決重復(fù)請(qǐng)求BUG的問題
下面小編就為大家?guī)硪黄远x事件解決重復(fù)請(qǐng)求BUG的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
js中的函數(shù)可以通過幾種方式創(chuàng)建，具體創(chuàng)建方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，文中通過例子給大家介紹了函數(shù)聲明和表達(dá)式之間的差別，感興趣的朋友跟隨小編一起看看吧
2019-12-12
指定區(qū)域的圖片自動(dòng)按比例縮小的js代碼（防止頁面被圖片撐破）
有時(shí)候我們更新的內(nèi)容，有很多的大圖片，就會(huì)導(dǎo)致頁面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個(gè)補(bǔ)充
2014-02-02
基于原生JS實(shí)現(xiàn)分頁效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生js實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
js關(guān)閉模態(tài)窗口刷新父頁面或跳轉(zhuǎn)頁面
點(diǎn)擊按鈕時(shí)，彈出B窗口（模態(tài)）。在B窗口中添加數(shù)據(jù)，提交后，要求B窗口自關(guān)閉，然后刷新A窗口（父），需要的朋友可以了解下
2012-12-12