使用JavaScript编写一个引人入胜的秒表计时器程序

28 min read

以下是一个基本的倒计时器示例：

<!DOCTYPE html>
<html>
<head>
	<title>倒计时器</title>
</head>
<body>
	<h1 id="timer">00:00:00</h1>
	<button onclick="startTimer()">开始</button>
	<button onclick="stopTimer()">停止</button>

	<script>
		var hour = 0;
		var minute = 0;
		var second = 0;
		var timer;

		function startTimer() {
			timer = setInterval(function() {
				second++;
				if (second == 60) {
					second = 0;
					minute++;
				}
				if (minute == 60) {
					minute = 0;
					hour++;
				}
				var h = hour < 10 ? "0" + hour : hour;
				var m = minute < 10 ? "0" + minute : minute;
				var s = second < 10 ? "0" + second : second;
				document.getElementById("timer").innerHTML = h + ":" + m + ":" + s;
			}, 1000);
		}

		function stopTimer() {
			clearInterval(timer);
		}
	</script>
</body>
</html>

此示例创建了一个 timer 变量，用于保存 setInterval 函数的返回值。 startTimer 函数将 timer 设置为每秒调用的函数的返回值。在函数内部，我们进行时间计数器并将结果格式化为小时，分钟和秒的字符串。最后，我们将 innerHTML 属性设置为格式化后的字符串。 stopTimer 函数通过调用 clearInterval 方法停止计时器。