基于 HTML、CSS 与 JavaScript 的计时器
目录
1 前言
2 代码解析
2.1 HTML 结构分析
2.2 CSS 样式分析
2.3 JavaScript 功能分析
3 完整代码
4 运行结果
5 总结
5.1 界面设计
5.1.1 整体布局
5.1.2 样式美化
5.2 功能实现
5.2.1 时间格式化
5.2.2 计时逻辑
5.3 优势与应用场景
5.3.1 优势
5.3.2 应用场景
1 前言
在今天的技术分享中，我们将一起深入剖析一个使用 HTML、CSS 和 JavaScript 构建的通用计时器。这个计时器不仅功能实用，而且界面炫酷，具有良好的响应式设计，适合各种场景使用。
通过这个通用计时器的实现，我们展示了 HTML、CSS 和 JavaScript 的强大功能。希望这篇文章能对你有所帮助，让你在前端开发的道路上更进一步！
2 代码解析
2.1 HTML 结构分析
<!DOCTYPE html>：声明文档类型为 HTML5。<html lang="zh-CN">：设置文档语言为中文。<head>：包含文档的元数据，如字符编码、视口设置、页面标题和内联样式表。<body>：包含页面的可见内容，包括一个容器、计时器显示区域、按钮区域、结果显示区域和一个模态框。
2.2 CSS 样式分析
- 全局样式：
*选择器将所有元素的外边距和内边距设置为 0，并使用box-sizing: border-box来确保元素的宽度和高度包含内边距和边框。 - 主体样式：设置主体的最小高度为视口高度，使用 Flexbox 布局将内容居中显示，并设置背景渐变。
- 容器样式：使用半透明背景和模糊效果，设置圆角和阴影，使容器看起来更现代。
- 标题样式：设置标题的字体大小、颜色和阴影，使其更加突出。
- 按钮样式：设置按钮的背景渐变、圆角和阴影，添加悬停效果，增强用户交互性。
- 模态框样式：默认隐藏模态框，使用固定定位将其居中显示，设置背景和阴影。
- 媒体查询：在小屏幕上调整容器、标题、计时器和按钮的样式，以提供更好的响应式体验。
2.3 JavaScript 功能分析
- 变量声明：声明了
timer、startTime变量，以及获取了计时器显示元素、结果显示元素和模态框元素。 formatTime函数：将毫秒数转换为HH:MM:SS格式的字符串。updateTimer函数：计算从开始计时到当前时间的时间差，并更新计时器显示。startTimer函数：检查计时器是否已经启动，如果没有，则记录开始时间，使用setInterval每秒调用一次updateTimer函数，显示模态框 2 秒后隐藏，并清空结果显示区域。stopTimer函数：检查计时器是否正在运行，如果是，则清除计时器，计算总计时长，并将结果显示在结果显示区域。
3 完整代码
<!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;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1a1a2e, #16213e);
font-family: 'Orbitron', sans-serif;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 0 40px rgba(0, 229, 255, 0.2);
width: 90%;
max-width: 500px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
h1 {
font-size: 2.5em;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 2px;
color: #00e5ff;
text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
#timer {
font-size: 4em;
margin-bottom: 40px;
color: #fff;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.buttons {
display: flex;
justify-content: center;
gap: 20px;
}
button {
padding: 15px 40px;
font-size: 1.2em;
border: none;
border-radius: 50px;
background: linear-gradient(45deg, #00e5ff, #007bff);
color: white;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 0 25px rgba(0, 229, 255, 0.6);
}
#result {
margin-top: 30px;
font-size: 1.5em;
color: #00e5ff;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 30px;
border-radius: 15px;
color: #00e5ff;
font-size: 1.5em;
box-shadow: 0 0 30px rgba(0, 229, 255, 0.5);
z-index: 1000;
}
@media (max-width: 480px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.8em;
}
#timer {
font-size: 2.5em;
}
button {
padding: 10px 30px;
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>通用计时器</h1>
<div id="timer">00:00:00</div>
<div class="buttons">
<button onclick="startTimer()">开始计时</button>
<button onclick="stopTimer()">结束计时</button>
</div>
<div id="result"></div>
</div>
<div id="modal" class="modal">计时已开始！</div>
<script>
let timer;
let startTime;
const timerDisplay = document.getElementById('timer');
const resultDisplay = document.getElementById('result');
const modal = document.getElementById('modal');
function formatTime(ms) {
let seconds = Math.floor(ms / 1000);
let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60);
seconds = seconds % 60;
minutes = minutes % 60;
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
function updateTimer() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
timerDisplay.textContent = formatTime(elapsed);
}
function startTimer() {
if (!timer) {
startTime = Date.now();
timer = setInterval(updateTimer, 1000);
modal.style.display = 'block';
setTimeout(() => {
modal.style.display = 'none';
}, 2000);
resultDisplay.textContent = '';
}
}
function stopTimer() {
if (timer) {
clearInterval(timer);
timer = null;
const endTime = Date.now();
const totalTime = endTime - startTime;
resultDisplay.textContent = `总计时长: ${formatTime(totalTime)}`;
}
}
</script>
</body>
</html>4 运行结果
5 总结
5.1 界面设计
5.1.1 整体布局
通过 HTML 的结构搭建，我们创建了一个简洁明了的界面。主要包含一个标题、计时器显示区域、开始和结束计时按钮，以及结果显示区域。整个界面被包裹在一个容器中，使用 Flexbox 布局将内容垂直和水平居中显示，确保在不同设备上都能完美呈现。
5.1.2 样式美化
使用 CSS 为界面添加了炫酷的效果。背景采用渐变颜色，营造出科技感十足的氛围。容器使用半透明背景和模糊效果，结合圆角和阴影，使界面看起来更加现代和专业。按钮使用渐变背景和悬停效果，增强了用户交互性。同时，使用媒体查询对小屏幕设备进行适配，确保在手机等设备上也能有良好的视觉体验。
5.2 功能实现
5.2.1 时间格式化
JavaScript 中的 formatTime 函数将毫秒数转换为 HH:MM:SS 格式的字符串，方便用户查看。通过简单的数学计算和字符串处理，确保时间显示的准确性和规范性。
5.2.2 计时逻辑
startTimer 函数用于启动计时器。在启动时，记录当前时间作为开始时间，并使用 setInterval 每秒调用一次 updateTimer 函数来更新计时器显示。同时，显示一个模态框提示用户计时已开始，2 秒后自动隐藏。
stopTimer 函数用于停止计时器。在停止时，清除计时器，记录结束时间，计算总计时长，并将结果显示在结果显示区域。
5.3 优势与应用场景
5.3.1 优势
- 代码简洁：使用 HTML、CSS 和 JavaScript 原生代码实现，无需引入额外的库，易于理解和维护。
- 响应式设计：通过媒体查询，界面在不同设备上都能自适应显示，提供一致的用户体验。
- 交互性强：按钮的悬停效果和模态框的提示功能，增强了用户与界面的交互性。
5.3.2 应用场景
- 运动计时：在健身、跑步等运动场景中，记录运动时间。
- 学习计时：在学习过程中，记录学习时长，提高学习效率。
- 游戏计时：在游戏中，设置倒计时或记录游戏时间。