7

限时限次数点击按钮

 2 years ago
source link: https://www.fly63.com/article/detial/11295
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
更新日期: 2022-03-25阅读量: 26标签: 定时器分享

扫一扫分享

  1. 用一个变量作为计数,点击一次，计数加一
  2. 点击函数内判断计数变量
  3. 设置定时恢复

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);
    color: white;
}
.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>

1.定时一次setTimeout(),单次使用

var timeOut = window.setTimeout(function(){
    //里面放定时任务
},1000);
//1000 是指时间，即1000ms

2.循环定时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;
}

来自：https://www.cnblogs.com/jokrhell/archive/2022/03/25/16053482.html

链接: https://www.fly63.com/article/detial/11295


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK