让我详细讲解“JS实现按钮控制计时开始和停止功能”的完整攻略:
1. 准备工作
首先,我们需要在HTML中创建两个按钮,一个用于开始计时,一个用于停止计时。按钮的点击事件可以直接在HTML中定义或者在JavaScript中动态绑定。
<button id="start-btn">开始计时</button>
<button id="stop-btn">停止计时</button>
在JavaScript中,我们需要创建一个计时器对象来实现计时的功能。使用setInterval()方法来将计时器对象绑定到具体的函数上。
let timerId; // 计时器对象
function startTimer() {
timerId = setInterval(() => {
// 每次执行的代码
}, 1000);
}
2. 开始计时
当用户点击“开始计时”按钮时,我们需要调用startTimer()方法来启动计时器对象。点击事件可以使用addEventListener()方法来动态绑定。
const startBtn = document.getElementById('start-btn');
startBtn.addEventListener('click', () => {
startTimer();
});
3. 停止计时
当用户点击“停止计时”按钮时,我们需要停止计时器对象的执行。这可以使用clearInterval()方法来实现,并且需要注意清除计时器对象的同时将其设置为null,以便于下一次计时的启动。
const stopBtn = document.getElementById('stop-btn');
stopBtn.addEventListener('click', () => {
clearInterval(timerId);
timerId = null;
});
示例一
下面是一个完整的示例,可以查看CodePen。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>JS计时器示例</title>
</head>
<body>
<button id="start-btn">开始计时</button>
<button id="stop-btn">停止计时</button>
<p id="time-display">00:00:00</p>
<script>
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const timeDisplay = document.getElementById('time-display');
let timerId; // 计时器对象
let time = 0; // 计时时间
function startTimer() {
timerId = setInterval(() => {
time++;
timeDisplay.textContent = formatTime(time);
}, 1000);
}
function stopTimer() {
clearInterval(timerId);
timerId = null;
time = 0;
timeDisplay.textContent = formatTime(time);
}
function formatTime(t) {
let hour = Math.floor(t / 3600);
let minute = Math.floor((t % 3600) / 60);
let second = t % 60;
return `${formatNumber(hour)}:${formatNumber(minute)}:${formatNumber(second)}`;
}
function formatNumber(n) {
return n < 10 ? `0${n}` : n;
}
startBtn.addEventListener('click', () => {
if (!timerId) {
startTimer();
}
});
stopBtn.addEventListener('click', () => {
if (timerId) {
stopTimer();
}
});
</script>
</body>
</html>
这个示例中,我们创建了一个计时器对象,使用setInterval()方法将其绑定到一个计时函数上。当用户点击“开始计时”按钮时,启动计时器对象;当用户点击“停止计时”按钮时,停止计时器对象的执行,并将计时时间归零。
示例二
下面我们来看一下另外一个示例,这个示例使用了面向对象的编程方式,并且支持暂停和继续计时的功能。你可以在CodePen查看完整代码。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>JS计时器示例</title>
</head>
<body>
<button id="start-btn">开始计时</button>
<button id="pause-btn">暂停计时</button>
<button id="resume-btn">继续计时</button>
<button id="stop-btn">停止计时</button>
<p id="time-display">00:00:00</p>
<script>
class Timer {
constructor() {
this.time = 0;
this.timerId = null;
this.running = false;
this.paused = false;
this.startBtn = document.getElementById('start-btn');
this.pauseBtn = document.getElementById('pause-btn');
this.resumeBtn = document.getElementById('resume-btn');
this.stopBtn = document.getElementById('stop-btn');
this.timeDisplay = document.getElementById('time-display');
this.startBtn.addEventListener('click', () => this.start());
this.pauseBtn.addEventListener('click', () => this.pause());
this.resumeBtn.addEventListener('click', () => this.resume());
this.stopBtn.addEventListener('click', () => this.stop());
this.update();
}
start() {
if (!this.running) {
this.timerId = setInterval(() => {
this.time++;
this.update();
}, 1000);
this.running = true;
this.paused = false;
}
}
pause() {
if (this.running && !this.paused) {
clearInterval(this.timerId);
this.paused = true;
}
}
resume() {
if (this.running && this.paused) {
this.timerId = setInterval(() => {
this.time++;
this.update();
}, 1000);
this.paused = false;
}
}
stop() {
if (this.running) {
clearInterval(this.timerId);
this.time = 0;
this.running = false;
this.paused = false;
this.update();
}
}
update() {
this.timeDisplay.textContent = this.formatTime(this.time);
if (this.running) {
this.startBtn.disabled = true;
this.pauseBtn.disabled = false;
this.resumeBtn.disabled = true;
this.stopBtn.disabled = false;
} else {
this.startBtn.disabled = false;
this.pauseBtn.disabled = true;
this.resumeBtn.disabled = true;
this.stopBtn.disabled = true;
}
if (this.paused) {
this.startBtn.disabled = true;
this.pauseBtn.disabled = true;
this.resumeBtn.disabled = false;
this.stopBtn.disabled = false;
}
}
formatTime(t) {
let hour = Math.floor(t / 3600);
let minute = Math.floor((t % 3600) / 60);
let second = t % 60;
return `${this.formatNumber(hour)}:${this.formatNumber(minute)}:${this.formatNumber(second)}`;
}
formatNumber(n) {
return n < 10 ? `0${n}` : n;
}
}
const timer = new Timer();
</script>
</body>
</html>
这个示例中,我们定义了Timer类来封装计时器的实现。这个类中包含了开始、暂停、继续、停止计时的方法,以及更新时间、格式化时间等辅助方法。这个类中还定义了按钮和时间显示等DOM元素的相关操作。当用户点击相应的按钮时,类中的方法会被调用,从而控制计时器的行为。值得一提的是,这个示例支持暂停和继续计时的功能,这是在第一个示例中没有涉及的。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现按钮控制计时开始和停止功能 - Python技术站