溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS如何實現限時限次數點擊按鈕”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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>定時一次setTimeout(),單次使用
var timeOut = window.setTimeout(function(){
//里面放定時任務
},1000);
//1000 是指時間，即1000ms循環定時setInterval()，需要使用clearInterval()來清除定時任務
var resetC = window.setInterval(function(){
//里面放定時任務
},1000);
/*
1000 是指時間，即1000ms
這個定時任務，每隔1s就會觸發一次。
如果要清除，使用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如何實現限時限次數點擊按鈕”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
