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

限時(shí)限次數(shù)點(diǎn)擊按鈕

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

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

TIPS

定時(shí)函數(shù)

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

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

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

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

禁止選中文字

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

CSS代碼實(shí)現(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í)限次數(shù)點(diǎn)擊按鈕的文章就介紹到這了,更多相關(guān)JS 點(diǎn)擊按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: