javascript設(shè)置連續(xù)兩次點擊按鈕時間間隔的方法
本文實例講述了javascript設(shè)置連續(xù)兩次點擊按鈕時間間隔的方法，分享給大家供大家參考。具體實現(xiàn)方法如下：
很多時候我們在實際應(yīng)用中，可能并不希望按鈕聯(lián)系被不間斷的點擊，所以要限定一定的時間間隔才能夠再次點擊按鈕，下面就通過代碼實例介紹一下如何實現(xiàn)此功能，代碼如下:
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("thediv");
var obt=document.getElementById("bt");
var count=0;
var flag=null;
function done(){
if(count==0){
clearInterval(flag);
}
else{
count=count-1;
}
}
obt.onclick=function(){
var val=parseInt(odiv.innerHTML);
if(count==0){
odiv.innerHTML=val+1;
count=20;
flag=setInterval(done,1000);
}
else{
alert("還需要"+(count)+"秒才能點擊");
}
}
}
</script>
</head>
<body>
<div id="thediv">0</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
以上代碼實現(xiàn)了我們的要求，可以限制點擊按鈕的間隔時間，這一效果可以擴展到其他的功能中，比如限制發(fā)帖的間隔時間等等，下面就介紹一下它的實現(xiàn)過程。
代碼注釋如下:
1.window.onload=function(){}，規(guī)定文檔內(nèi)容完全加載完畢再去執(zhí)行函數(shù)中的代碼。
2.var odiv=document.getElementById("thediv")，獲取div元素對象。
3.var obt=document.getElementById("bt")，獲取按鈕對象。
4.var count=0，聲明一個變量并賦初值為0，它用來存儲間隔時間。
5.var flag=null，聲明一個變量并賦初值為null，此變量用來存儲定時器函數(shù)的返回值。
6.function done(){}，此函數(shù)可以被定時器函數(shù)不斷的調(diào)用，來對count進行遞減。
7.if(count==0){clearInterval(flag);}，如果count==0，則停止定時器函數(shù)的執(zhí)行。
8.else{count=count-1;}，如果不等于0，則進行減一操作。
9.obt.onclick=function(){}，為按鈕注冊點擊事件處理函數(shù)。
10.var val=parseInt(odiv.innerHTML)，獲取div中的內(nèi)容，并轉(zhuǎn)換為整數(shù)。
11.if(count==0){
odiv.innerHTML=val+1;
count=20;
flag=setInterval(done,1000);
}
如果count等于0話餓，那么就將div中的內(nèi)容+1，并且將count設(shè)置為20，同時開機定時器函數(shù)的執(zhí)行。
12.else{alert("還需要"+(count)+"秒才能點擊");},如果count不等于零，那么彈出還差多長時間可以點擊。
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
我們在echarts表中經(jīng)常會出現(xiàn)X軸的信息顯示不完全的情況,所以本文小編給大家介紹了echarts X軸顯示不全的處理方法,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-01-01
在前端開發(fā)中總會遇到各種各樣需要使用或計算坐標和距離的情況，于是便有了整理記錄的想法，即加深了印象，又方便隨時查閱。2019-05-05
JavaScript函數(shù)及其prototype詳解
這篇文章主要介紹了JavaScript函數(shù)及其prototype詳解的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了基于javascript實現(xiàn)隨機顏色變化效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表的橫向滑動，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
Javascript數(shù)組的?forEach?方法詳細介紹
這篇文章主要介紹了Javascript數(shù)組的forEach方法詳細介紹,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
JavaScript整除運算函數(shù)ceil和floor的區(qū)別分析
這篇文章主要介紹了JavaScript整除運算函數(shù)ceil和floor的區(qū)別分析,實例分析了ceil和floor函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家介紹了axios 工具函數(shù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
詳解Javascript百度地圖接口開發(fā)文檔中的類和方法
最近在工作中在用laravel框架仿寫?zhàn)I了么外賣商城,于是學(xué)習(xí)了一下有關(guān)地圖接口相關(guān)的知識,以下是百步地圖接口開發(fā)文檔的一些類和方法的使用，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-02-02
遇到網(wǎng)頁上有精美圖片或者精彩文字想保存時，通常大家都是選中目標后按鼠標右鍵，在彈出菜單中選擇“圖片另存為”或“復(fù)制”來達到我們的目的。但是，目前有許多網(wǎng)頁都屏蔽了鼠標右鍵，那么用js如何實現(xiàn)禁止鼠標右鍵的功能呢？下面小編給大家介紹下2016-10-10