快捷導(dǎo)航

JS?限時限次數(shù)點擊按鈕的實現(xiàn)思路

更新時間：2022年03月25日 14:13:07 作者：第三人設(shè)

這篇文章主要介紹了JS?限時限次數(shù)點擊按鈕,實現(xiàn)方法很簡單需要用一個變量作為計數(shù),點擊一次，計數(shù)加一點擊函數(shù)內(nèi)判斷計數(shù)變量設(shè)置定時恢復(fù)，對實例代碼感興趣的朋友一起看看吧

限時限次數(shù)點擊按鈕

思路:用一個變量作為計數(shù),點擊一次，計數(shù)加一點擊函數(shù)內(nèi)判斷計數(shù)變量設(shè)置定時恢復(fù)

實現(xiàn)

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>
 
//計數(shù)變量
var count = 0;
//3秒鐘重置一次計數(shù) 并恢復(fù)按鈕
var resetC = window.setInterval(function(){
    //恢復(fù)計數(shù)   恢復(fù)點擊事件
    count = 0;
    $('.btn').attr('onclick','doIt()');
    //恢復(fù)背景顏色
    $('.btn').addClass('bg1');
    $('.btn').removeClass('bg2');
},1000*10);
//點擊事件
function doIt(){
     //點一次  計數(shù)加一
     count += 1;
    //判斷計數(shù)  大于2  就
    if(count >= 2){
        //移除 點擊函數(shù)
        $('.btn').removeAttr('onclick');
        //更換背景CSS
        $('.btn').addClass('bg2');
        $('.btn').removeClass('bg1');
    }
    //將計數(shù)顯示出來
    $('.show').text(count);
}
</script>

TIPS

定時函數(shù)

定時一次setTimeout(),單次使用

var timeOut = window.setTimeout(function(){
    //里面放定時任務(wù)
},1000);
//1000 是指時間，即1000ms

循環(huán)定時setInterval()，需要使用clearInterval()來清除定時任務(wù)

var resetC = window.setInterval(function(){
	//里面放定時任務(wù)
},1000);
/*
  1000 是指時間，即1000ms
  這個定時任務(wù)，每隔1s就會觸發(fā)一次。
  如果要清除，使用clearInterval()函數(shù)
*/
window.clearInterval(resetC);

禁止選中文字

使用<a>標(biāo)簽作為點擊元素，當(dāng)點擊事件頻繁時，文字會被選中，不好看

CSS代碼實現(xiàn)

body{
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit瀏覽器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期瀏覽器*/
    user-select: none;
}

到此這篇關(guān)于JS 限時限次數(shù)點擊按鈕的文章就介紹到這了,更多相關(guān)JS 點擊按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: