要实现重置功能在按下后停止计数移动,可以通过以下步骤来实现:
下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>计数器</title>
<style>
#counter {
font-size: 24px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="counter">0</div>
<button id="resetBtn">重置</button>
<script>
var counter = document.getElementById('counter');
var resetBtn = document.getElementById('resetBtn');
var isMoving = true;
var count = 0;
var intervalId;
function startCounter() {
intervalId = setInterval(function() {
if (isMoving) {
count++;
counter.textContent = count;
}
}, 1000);
}
function stopCounter() {
clearInterval(intervalId);
}
function resetCounter() {
isMoving = false;
count = 0;
counter.textContent = count;
}
resetBtn.addEventListener('click', function() {
resetCounter();
});
startCounter();
</script>
</body>
</html>
在上述示例代码中,通过点击重置按钮,可以停止计数器的移动,并将计数器的值重置为0。
领取专属 10元无门槛券
手把手带您无忧上云