javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法
本文實(shí)例講述了javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法,分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
很多時(shí)候我們在實(shí)際應(yīng)用中,可能并不希望按鈕聯(lián)系被不間斷的點(diǎn)擊,所以要限定一定的時(shí)間間隔才能夠再次點(diǎn)擊按鈕,下面就通過代碼實(shí)例介紹一下如何實(shí)現(xiàn)此功能,代碼如下:
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<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)+"秒才能點(diǎn)擊");
}
}
}
</script>
</head>
<body>
<div id="thediv">0</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
以上代碼實(shí)現(xiàn)了我們的要求,可以限制點(diǎn)擊按鈕的間隔時(shí)間,這一效果可以擴(kuò)展到其他的功能中,比如限制發(fā)帖的間隔時(shí)間等等,下面就介紹一下它的實(shí)現(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,聲明一個(gè)變量并賦初值為0,它用來存儲(chǔ)間隔時(shí)間。
5.var flag=null,聲明一個(gè)變量并賦初值為null,此變量用來存儲(chǔ)定時(shí)器函數(shù)的返回值。
6.function done(){},此函數(shù)可以被定時(shí)器函數(shù)不斷的調(diào)用,來對count進(jìn)行遞減。
7.if(count==0){clearInterval(flag);},如果count==0,則停止定時(shí)器函數(shù)的執(zhí)行。
8.else{count=count-1;},如果不等于0,則進(jìn)行減一操作。
9.obt.onclick=function(){},為按鈕注冊點(diǎn)擊事件處理函數(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í)開機(jī)定時(shí)器函數(shù)的執(zhí)行。
12.else{alert("還需要"+(count)+"秒才能點(diǎn)擊");},如果count不等于零,那么彈出還差多長時(shí)間可以點(diǎn)擊。
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- 關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
- js控制再次點(diǎn)擊按鈕之間的間隔時(shí)間可防止重復(fù)提交
- JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交
- JavaScript禁止用戶多次提交的兩種方法
- JavaScript代碼實(shí)現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt
- js禁止頁面刷新與后退的方法
- ES6數(shù)組的擴(kuò)展詳解
- ES6中Math對象新增的方法實(shí)例詳解
- ES6正則的擴(kuò)展實(shí)例詳解
- JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法【基于ES6語法】
相關(guān)文章
PNGHandler-借助JS讓PNG圖在IE下實(shí)現(xiàn)透明(包括背景圖)
PNGHandler-借助JS讓PNG圖在IE下實(shí)現(xiàn)透明(包括背景圖)...2007-08-08uni-app中使用手機(jī)號(hào)一鍵登錄的詳細(xì)圖文教程
最近剛接觸了uni-app,用于開發(fā)微信小程序,設(shè)計(jì)到了微信授權(quán)登錄,下面這篇文章主要給大家介紹了關(guān)于uni-app中使用手機(jī)號(hào)一鍵登錄的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01javascript開發(fā)中因空格引發(fā)的錯(cuò)誤
最近寫一個(gè)關(guān)于用JavaScript做圖片自動(dòng)切換問題發(fā)現(xiàn)一個(gè)非常奇特的問題,除了空格和換行外完全相同的代碼,在Firefox下卻有截然不同的運(yùn)行結(jié)果,今天記錄以提供他人留意及自我備查。2010-11-11- curring的概念將函數(shù)式編程的概念和默認(rèn)參數(shù)以及可變參數(shù)結(jié)合在一起.一個(gè)帶n個(gè)參數(shù),curried的函數(shù)固化第一個(gè)參數(shù)為固定參數(shù),并返回另一個(gè)帶n-1個(gè)參數(shù)的函數(shù)對象,分別類似于LISP的原始函數(shù)car和cdr的行為。currying能泛化為偏函數(shù)應(yīng)用(partial function application, PFA),p 這種函數(shù)將任意數(shù)量(順序)的參數(shù)的函數(shù)轉(zhuǎn)化為另一個(gè)帶剩余參數(shù)的函數(shù)對象2012-02-02
JavaScript面向?qū)ο笾w會(huì)[總結(jié)]
看過很多JavaScript書,對JavaScript的面向?qū)ο笾v的都比較深入,但是并沒有做到深入淺出,總結(jié)了我做的一些JavaScript程序的經(jīng)驗(yàn),以簡潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶?shí)現(xiàn)。2008-11-11JavaScript數(shù)學(xué)對象Math操作數(shù)字的方法
這篇文章主要為大家介紹了JavaScript數(shù)學(xué)對象Math操作數(shù)字的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05