秒表定时器插件

原创已于 2025-06-27 15:38:40 修改 · 263 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-24 16:09:58 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秒表定时器插件</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f7fa;
padding: 20px;
}

.container {
max-width: 500px;
width: 100%;
text-align: center;
}

h1 {
color: #333;
margin-bottom: 30px;
}

.stopwatch {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}

.display {
font-size: 60px;
font-weight: bold;
color: #333;
margin-bottom: 30px;
font-family: monospace;
}

.buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}

.btn {
padding: 12px 25px;
border: none;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.btn-start {
background: linear-gradient(to right, #1D976C, #93F9B9);
color: white;
}

.btn-pause {
background: linear-gradient(to right, #FF9800, #FF5722);
color: white;
}

.btn-reset {
background: linear-gradient(to right, #4776E6, #8E54E9);
color: white;
}

.btn-lap {
background: linear-gradient(to right, #607D8B, #37474F);
color: white;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn:active {
transform: translateY(1px);
}

.laps {
margin-top: 30px;
text-align: left;
max-height: 200px;
overflow-y: auto;
padding: 10px;
}

.lap-item {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
}

.download-section {
margin-top: 30px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.website-link {
display: inline-block;
margin-top: 30px;
padding: 12px 25px;
background: linear-gradient(to right, #FF416C, #FF4B2B);
color: white;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.website-link:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="container">
<h1>秒表定时器插件</h1>

<div class="stopwatch">
<div class="display" id="display">00:00:00.00</div>

<div class="buttons">
<button class="btn btn-start" id="startBtn">开始</button>
<button class="btn btn-pause" id="pauseBtn" disabled>暂停</button>
<button class="btn btn-reset" id="resetBtn" disabled>重置</button>
<button class="btn btn-lap" id="lapBtn" disabled>计次</button>
</div>

<div class="laps" id="laps">

</div>
</div>

<div class="download-section">
<button class="btn" id="downloadBtn">下载完整源代码</button>
</div>


</div>

<script>
class Stopwatch {
constructor(displayElement, lapsElement) {
this.display = displayElement;
this.lapsContainer = lapsElement;
this.isRunning = false;
this.startTime = 0;
this.elapsedTime = 0;
this.timer = null;
this.laps = [];

this.init();
}

init() {
this.render(0);
}

start() {
if (!this.isRunning) {
this.isRunning = true;
this.startTime = Date.now() - this.elapsedTime;
this.timer = setInterval(() => this.update(), 10);
}
}

pause() {
if (this.isRunning) {
this.isRunning = false;
this.elapsedTime = Date.now() - this.startTime;
clearInterval(this.timer);
}
}

reset() {
this.pause();
this.elapsedTime = 0;
this.render(0);
this.laps = [];
this.lapsContainer.innerHTML = '';
}

lap() {
if (this.isRunning) {
const lapTime = Date.now() - this.startTime;
this.laps.push(lapTime);
this.renderLap(lapTime, this.laps.length);
}
}

update() {
const elapsed = Date.now() - this.startTime;
this.render(elapsed);
}

render(time) {
const hours = Math.floor(time / (1000 * 60 * 60)).toString().padStart(2, '0');
const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
const seconds = Math.floor((time % (1000 * 60)) / 1000).toString().padStart(2, '0');
const milliseconds = Math.floor((time % 1000) / 10).toString().padStart(2, '0');

this.display.textContent = `${hours}:${minutes}:${seconds}.${milliseconds}`;
this.elapsedTime = time;
}

renderLap(lapTime, lapNumber) {
const lapItem = document.createElement('div');
lapItem.className = 'lap-item';

const hours = Math.floor(lapTime / (1000 * 60 * 60)).toString().padStart(2, '0');
const minutes = Math.floor((lapTime % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
const seconds = Math.floor((lapTime % (1000 * 60)) / 1000).toString().padStart(2, '0');
const milliseconds = Math.floor((lapTime % 1000) / 10).toString().padStart(2, '0');

lapItem.innerHTML = `
<span>计次 ${lapNumber}</span>
<span>${hours}:${minutes}:${seconds}.${milliseconds}</span>
`;

this.lapsContainer.prepend(lapItem);
}
}

document.addEventListener('DOMContentLoaded', function() {
const display = document.getElementById('display');
const lapsContainer = document.getElementById('laps');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const lapBtn = document.getElementById('lapBtn');
const downloadBtn = document.getElementById('downloadBtn');

const stopwatch = new Stopwatch(display, lapsContainer);

startBtn.addEventListener('click', function() {
stopwatch.start();
startBtn.disabled = true;
pauseBtn.disabled = false;
resetBtn.disabled = false;
lapBtn.disabled = false;
});

pauseBtn.addEventListener('click', function() {
stopwatch.pause();
startBtn.disabled = false;
pauseBtn.disabled = true;
});

resetBtn.addEventListener('click', function() {
stopwatch.reset();
startBtn.disabled = false;
pauseBtn.disabled = true;
resetBtn.disabled = true;
lapBtn.disabled = true;
});

lapBtn.addEventListener('click', function() {
stopwatch.lap();
});

downloadBtn.addEventListener('click', function() {
// 创建包含完整HTML内容的Blob对象
const htmlContent = document.documentElement.outerHTML;
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);

// 创建下载链接并触发点击
const a = document.createElement('a');
a.href = url;
a.download = '秒表定时器插件.html';
document.body.appendChild(a);
a.click();

// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 0);
});
});
</script>
</body>
</html>