JavaScript代碼判斷點(diǎn)擊第幾個按鈕

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

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

最近很輕松，項(xiàng)目結(jié)束，趁個空余時間寫了一段javascript代碼實(shí)現(xiàn)判斷點(diǎ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實(shí)現(xiàn)點(diǎn)擊按鈕后，再過60秒后才能再次點(diǎn)擊此按鈕

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

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