资源描述:一款秒表在线计时器实用工具,秒表可显示小时、分钟、秒和毫秒(三位数)。鼠标点击“开始/停止”按钮可控制秒表,并使用“重置”按钮重置秒表归零。
基于Bootstrap5实现的响应式毫秒计时器秒表(共3个文件)
使用方法
let startTime;
let accumulatedTime = 0;
let running = false;
function startStop() {
if (running) {
running = false;
} else {
startTime = null;
requestAnimationFrame(updateTime);
running = true;
}
}
function reset() {
accumulatedTime = 0;
updateDisplay();
running = false;
}
function updateTime(timestamp) {
if (!startTime) {
startTime = timestamp;
}
if (!running) return;
accumulatedTime = timestamp - startTime;
updateDisplay();
requestAnimationFrame(updateTime);
}
function updateDisplay() {
const totalMilliseconds = Math.floor(accumulatedTime);
const days = Math.floor(totalMilliseconds / (24 * 60 * 60 * 1000));
const hours = Math.floor((totalMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
const minutes = Math.floor((totalMilliseconds % (60 * 60 * 1000)) / (60 * 1000));
const seconds = Math.floor((totalMilliseconds % (60 * 1000)) / 1000);
const milliseconds = totalMilliseconds % 1000;
const timeString = `${formatTime(days)}:${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}:${formatTime(milliseconds, 3)}`;
document.getElementById('stopwatch').innerText = timeString;
}
function formatTime(value, digits = 2) {
const paddedValue = value.toString().padStart(digits, '0');
return paddedValue.substring(0, digits);
}
// Add event listener to stop the stopwatch on any touch
$(document).on('touchstart', function () {
running = false;
});
// Initial display
updateDisplay();
站长提示:
1. 苦力吧素材官方QQ群:
950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励
2K币。
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服