使用js及html、css完成秒表计时器，要求如下:
1.界面为一个显示计时面板和三个按钮分别为:开始，暂停，重置
2.点击开始，面板开始计时，
3.点击暂停，面板停止
4.点击重置，计时面板重新为0
提示：采用定时器及定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<span id="timer"></span>
<button id="startButton" class="button">开始</button>
<button id="pauseButton" class="button" disabled>暂停</button>
<button id="resetButton" class="button">重置</button>
</div>
<script src="script.js"></script>
</body>
</html>
<script>
var timer = 0; // 计时器变量
var isRunning = false; // 控制计时器是否运行的变量
document.getElementById("startButton").onclick = function () {
if (!isRunning) {
isRunning = true;
document.getElementById("pauseButton").disabled = false;
setInterval(function () {
timer++;
document.getElementById("timer").innerHTML = timer;
}, 1000);
}
};
document.getElementById("pauseButton").onclick = function () {
isRunning = false;
document.getElementById("pauseButton").disabled = true;
};
document.getElementById("resetButton").onclick = function () {
timer = 0;
document.getElementById("timer").innerHTML = 0;
document.getElementById("pauseButton").disabled = true;
};
</script>计数器变量完成，定时器间隔为1s
扫一扫
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
