如何使用vanilla JS让秒表在用户点击同一按钮两次时暂停？
要实现这个功能，可以使用vanilla JS编写以下代码：
<!DOCTYPE html>
<html>
<head>
<title>秒表</title>
</head>
<body>
<button id="timer-btn" onclick="startTimer()">开始/暂停</button>
<p id="timer">0:00</p>
<script>
var timerInterval;
var startTime;
var running = false;
function startTimer() {
var timerBtn = document.getElementById("timer-btn");
if (running) {
// 暂停
clearInterval(timerInterval);
timerBtn.innerText = "开始";
running = false;
} else {
// 开始
startTime = Date.now();
timerInterval = setInterval(updateTimer, 1000);
timerBtn.innerText = "暂停";
running = true;
}
}
function updateTimer() {
var elapsedTime = Math.floor((Date.now() - startTime) / 1000);
var minutes = Math.floor(elapsedTime / 60);
var seconds = elapsedTime % 60;
var timerDisplay = document.getElementById("timer");
timerDisplay.innerText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
</script>
</body>
</html>这段代码实现了一个简单的秒表功能，当用户点击按钮时，如果秒表正在运行，则暂停秒表并将按钮文本改为“开始”；如果秒表已经暂停，则重新开始计时并将按钮文本改为“暂停”。
这里使用了setInterval函数来定时更新秒表显示，每秒钟执行一次updateTimer函数。通过计算从开始计时到现在的时间差，可以得到秒表显示的分钟和秒钟。这个时间差是通过获取当前时间戳Date.now()来计算的。
推荐腾讯云的相关产品：云服务器（CVM）用于部署和运行应用程序、云数据库 MySQL（CDB）用于存储和管理数据。
参考链接：
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
