快捷導(dǎo)航

JavaScript代碼判斷點擊第幾個按鈕

更新時間：2015年12月13日 13:58:32 作者：keinx

javascript點擊按鈕需求，在項目開發(fā)過程中經(jīng)常遇到，本文通過一段代碼給大家分享javascript代碼判斷點擊第幾個按鈕，對本文感興趣的朋友一起學(xué)習(xí)吧

最近很輕松，項目結(jié)束，趁個空余時間寫了一段javascript代碼實現(xiàn)判斷點擊第幾個按鈕的相關(guān)代碼，具體代碼如下所示：

 <html>
   <head>
     <meta charset='utf-'>
   </head>
   <body>
     <button>第一個</button>
     <button>第二個</button>
     <button>第三個</button>
     <button>第四個</button>
     <button>第五個</button>
     <script>
       var but=document.getElementsByTagName('button');
       for(i=;i<but.length;i++){
         but[i].setAttribute('i',i+);
         but[i].onclick=function(){
           b=this.getAttribute('i');
           alert('這是第'+b+'個按鈕');
         }
       }
     </script>
   </body>
 </html>

下面一段代碼給大家介紹JavaScript實現(xiàn)點擊按鈕后，再過60秒后才能再次點擊此按鈕

注冊的時候需要發(fā)送驗證激活帳號的郵件，為了避免郵件的多次重復(fù)發(fā)送，所以可以在點擊了發(fā)送后，設(shè)置button要過一段時間才能繼續(xù)點擊。下面是一個簡單的例子：

<html> 
<head> 
<title>點擊獲取驗證碼按鈕后按鈕變灰，倒計時一段時間后又可重復(fù)點擊</title> 
</head> 
<body> 
<input type="button" id="btn" value="免費獲取驗證碼" /> 
<script type="text/javascript"> 
var wait=60; 
function time(o) { 
    if (wait == 0) { 
      o.removeAttribute("disabled");      
      o.value="免費獲取驗證碼"; 
      wait = 60; 
    } else { 
      o.setAttribute("disabled", true); 
      o.value=wait+"秒后可以重新發(fā)送"; 
      wait--; 
      setTimeout(function() { 
        time(o) 
      }, 
      1000) 
    } 
  } 
document.getElementById("btn").onclick=function(){time(this);} 
</script> 
</body> 
</html>

以上是本文的全部敘述，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

Bootstrap風(fēng)格的WPF樣式
此樣式基于bootstrap-3.3.0,樣式文件里的源碼行數(shù)都是指的這個版本.這篇文章主要介紹了Bootstrap風(fēng)格的WPF樣式的相關(guān)資料，需要的朋友參考下
2016-12-12
Bootstrap+jfinal退出系統(tǒng)彈出確認框的實現(xiàn)方法
這篇文章主要為大家詳細介紹了Bootstrap+jfinal退出系統(tǒng)彈出框的實現(xiàn)方法，感興趣的小伙伴們可以參考一下
2016-05-05
微信小程序中懸浮窗功能的實現(xiàn)代碼
懸浮窗就是圖中微信圖標的按鈕，采用fixed定位，可拖動和點擊。本文給大家分享一個比較常見的常見，通過實例代碼給大家介紹微信小程序中懸浮窗功能的實現(xiàn)，一起看看吧
2019-08-08
微信小程序scroll-view隱藏滾動條的方法詳解
這篇文章主要介紹了微信小程序scroll-view隱藏滾動條的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
微信小程序商城項目之商品屬性分類(4)
這篇文章主要為大家詳細介紹了微信小程序商城項目之商品屬性值聯(lián)動選擇,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
JS實現(xiàn)自定義彈窗功能
瀏覽器自帶的原生彈窗很不美觀，而且功能比較單一，絕大部分時候我們都會按照設(shè)計圖自定義彈窗或者直接使用注入layer的彈窗等等。下面小編給大家?guī)砹薐S實現(xiàn)自定義彈窗，感興趣的朋友一起看看吧
2018-08-08
詳解小程序中h5頁面onShow實現(xiàn)及跨頁面通信方案
這篇文章主要介紹了小程序中h5頁面onShow實現(xiàn)及跨頁面通信方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
兩個JS之間的函數(shù)互相調(diào)用方式
這篇文章主要介紹了兩個JS之間的函數(shù)互相調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
JavaScript Event學(xué)習(xí)第九章鼠標事件
鼠標事件是到目前為止最重要的事件。在這一章我將介紹一些鼠標事件的最常見的問題和技巧。
2010-02-02
深入理解JavaScript中的預(yù)解析
JavaScript有“預(yù)解析”行為。理解這一特性是很重要的，不然在實際開發(fā)中你可能會遇到很多無從解析的問題，甚至導(dǎo)致程序bug的存在。下面這篇文章就給大家詳細介紹了JavaScript中的預(yù)解析，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2017-01-01