如何通过按住按钮来增加js中的变量

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Clicker</title>
<script type="text/javascript">
var score = 1;
}
function increase1()
{
score=score+1;
document.getElementById("clickmebtn").value = score;
}
</script>
</head>
<body>
<div id="container"><center><div id="spacer"></div><div id="btiptsish">
<input id="clickmebtn" type="submit" value="0" onmousedown="increase1()" onmouseup="increase1()"><br><br><br><br></r></div></center>
</div>
</body>
</html>

我可以使用纯JavaScript来增加保持按钮变量吗？我想增加变量命名分数。

我相信你在跳这样的东西-

let score = 0;
let status = false;
const scoreEl = document.querySelector('#score');
const btnEl = document.querySelector('#btn');
let interval = null;
btnEl.addEventListener('mousedown', e => {
status = true;
update();
});
btnEl.addEventListener('mouseup', e => {
status = false;
update();
});
const update = () => {
if (status) {
interval = setInterval(() => {
score++;
scoreEl.innerHTML = score;
}, 100);    
} else {
if (interval) clearInterval(interval);
}

}

<div id="score">0</div>
<button id="btn">Increment</button>

在onmousedown上，创建一个setInterval以每隔n毫秒调用一次函数
在onmouseup上，删除该间隔！(clearInterval(

var interval = null;
var button = document.querySelector("#clickmebtn");
var score = 0;
button.onmousedown = function(){
addCount(); // Call function right away
interval = setInterval(addCount, 500); // Start calling every 500ms
};
button.onmouseup = function(){
clearInterval(interval);  // Clear the interval if button is released
};
// Add 1 to counter and set as button value
function addCount() {
button.value = ++score;
}

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Clicker</title>
</head>
<body>
<div id="container">
<center>
<div id="spacer"></div>
<div id="btiptsish">
<input id="clickmebtn" type="submit" value="0"><br><br><br><br>
</div>
</center>
</div>
</body>
</html>

使用setTimeout设置一个间隔，并在onmousedown事件侦听器中循环执行。我在onmouseup中使用了一个单独的监听器来清除超时

下面您可以在setTimeout中更改时间，以更改分数增加之间的间隔

var score = 0;
var timer;
function increase1()
{
timer = setTimeout(function(){
score=score+1;
document.getElementById("clickmebtn").value = score;

increase1();
}, 1000);
}
function stop() {
clearTimeout(timer);
}

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Clicker</title>
</head>
<body>
<div id="container"><center><div id="spacer"></div><div id="btiptsish">
<input id="clickmebtn" type="submit" value="0" onmousedown="increase1()" onmouseup="stop()"><br><br><br><br></r></div></center>
</div>
</body>
</html>

我会通过将onmousedown事件更改为[start an interval][1]来实现这一点，该事件会重复调用increase1()方法，直到用onmouseup清除[sinterval][2]。

您可以使用繁忙循环(例如while(true)(来完成此操作，但这会阻塞UI线程，并且您的页面将变得没有响应。使用间隔可以避免这种情况。

您的示例，更新为使用此方法：

var score = 1;
function increase1() {
score = score + 1;
document.getElementById("clickmebtn").value = score;
}
var increaseDelay = 10; // increase score once every 10ms (prevents blocking UI thread with busy loop)
var interval = null;
function turnCounterOn() {
interval = setInterval(increase1, increaseDelay);
}
function turnCounterOff() {
clearInterval(interval);
}

<div id="container">
<center>
<div id="spacer"></div>
<div id="btiptsish">
<input id="clickmebtn" type="submit" value="0" onmousedown="turnCounterOn()"
onmouseup="turnCounterOff()">
<br><br><br><br>
</div>
</center>
</div>

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

相关内容

最新更新

热门标签：