JS?限時限次數點擊按鈕的實現思路
更新時間：2022年03月25日 14:13:07 作者：第三人設
這篇文章主要介紹了JS?限時限次數點擊按鈕,實現方法很簡單需要用一個變量作為計數,點擊一次，計數加一點擊函數內判斷計數變量設置定時恢復，對實例代碼感興趣的朋友一起看看吧
限時限次數點擊按鈕
思路:用一個變量作為計數,點擊一次，計數加一點擊函數內判斷計數變量設置定時恢復
實現
HTML代碼
<body>
<div class="a123">
<a class="btn bg1" onclick="doIt()">123123</a>
<br>
<div class="show"></div>
</div>
</body>CSS代碼
.btn{
display: inline-block;
width: 80px;
height: 40px;
line-height: 40px;
border-radius: 5px;
cursor: pointer;
}
.bg1{
background-color: rgb(21, 93, 248);
color: white;
.bg2{
background-color: rgb(53, 53, 53);
.a123{
width: 500px;
height: 300px;
border: 1px solid pink;
margin: 200px auto;
padding: 30px;
text-align: center;JS代碼
<script>
//計數變量
var count = 0;
//3秒鐘重置一次計數 并恢復按鈕
var resetC = window.setInterval(function(){
//恢復計數 恢復點擊事件
count = 0;
$('.btn').attr('onclick','doIt()');
//恢復背景顏色
$('.btn').addClass('bg1');
$('.btn').removeClass('bg2');
},1000*10);
//點擊事件
function doIt(){
//點一次 計數加一
count += 1;
//判斷計數 大于2 就
if(count >= 2){
//移除 點擊函數
$('.btn').removeAttr('onclick');
//更換背景CSS
$('.btn').addClass('bg2');
$('.btn').removeClass('bg1');
}
//將計數顯示出來
$('.show').text(count);
}
</script>TIPS
定時函數
定時一次setTimeout(),單次使用
var timeOut = window.setTimeout(function(){
//里面放定時任務
},1000);
//1000 是指時間，即1000ms循環(huán)定時setInterval()，需要使用clearInterval()來清除定時任務
var resetC = window.setInterval(function(){
//里面放定時任務
},1000);
/*
1000 是指時間，即1000ms
這個定時任務，每隔1s就會觸發(fā)一次。
如果要清除，使用clearInterval()函數
*/
window.clearInterval(resetC);禁止選中文字
使用<a>標簽作為點擊元素， 當點擊事件頻繁時 ，文字會被選中，不好看
CSS代碼實現
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}到此這篇關于JS 限時限次數點擊按鈕的文章就介紹到這了,更多相關JS 點擊按鈕內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
a=0 if(a<1)alert(a),alert(1-a) VS if(a==0){alert(a);alert(1-a)}2008-02-02
下面小編就為大家?guī)硪黄狫avaScript中閉包之淺析解讀(必看篇)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
以前發(fā)布的防止被iframe的代碼，容易在火狐瀏覽器下， 不斷的刷新頁面。所以從網站找到了這篇文章。2010-07-07
Bootstrap標簽頁（Tab）插件切換echarts不顯示問題的解決
這篇文章主要給大家介紹了關于Bootstrap標簽頁（Tab）插件切換echarts不顯示問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
這篇文章主要介紹了Javascript對象Clone用法,實例分析了javascript對象克隆的相關技巧,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關于微信小程序實現漸入漸出動畫效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
HTML DOM (Document Object Model文檔對象模型) DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標準組件. DOM是以層次結構組織的節(jié)點或信息片斷的集合.2009-04-04
這篇文章主要為大家詳細介紹了微信小程序實現點擊圖片旋轉180度并且彈出下拉列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript常用正則驗證函數實例小結【年齡,數字,Email,手機,URL,日期等】
這篇文章主要介紹了JavaScript常用正則驗證函數,結合實例形式總結分析了javascript針對年齡、數字、Email、手機、URL、日期等格式常用正則驗證技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了Javascript獲取頁面元素的絕對位置實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11