jquery按住按钮不断增加或减少

最新推荐文章于 2021-06-10 13:07:06 发布

~往事随风~

最新推荐文章于 2021-06-10 13:07:06 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Simon_cm/article/details/79653452

本文介绍了一个使用JavaScript实现的计数器按钮功能。通过点击或按住按钮来增加或减少计数器数值，并实时更新页面显示。涉及jQuery库的使用，演示了事件监听如click、mousedown、mouseup和mouseout的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//注释部分为js 的另一种实现方式

<body>

<p>0</p>
<button id="add">+</button>
<button id="minus">-</button>
</body>

$(function(){
var p = 0;
var tid;
//按住增加
$("#add").click(function(){
p = $("p").html();
p++;
$("p").html(p);
});
$("#add").mousedown(function(){
tid = setInterval(function(){
p++;
$("p").html(p);
},100)
})
$("#add").mouseup(function(){
clearInterval(tid);
})
$("#add").mouseout(function(){
clearInterval(tid);
})
//按住减少
$("#minus").click(function(){
p = $("p").html();
p--;
$("p").html(p);
});
$("#minus").mousedown(function(){
tid = setInterval(function(){
p--;
$("p").html(p);
},100)
})
$("#minus").mouseup(function(){
clearInterval(tid);
})
$("#minus").mouseout(function(){
clearInterval(tid);
})
})

/* var c = 0;
var tid;
var btn = window.document.getElementById("button");
btn.onclick = function(e){
c++;
btn.innerHTML = c;
};
btn.onmousedown = function(e){
tid = setInterval(function(){
c++;
btn.innerHTML = c;
},100);
};
btn.onmouseup = function(e){
clearInterval(tid);
}
btn.onmouseout = function(e){
clearInterval(tid);
} */
</script>