基于 HTML、CSS 与 JavaScript 的计时器

写过一篇 · 2025-3-5 16:27:42

目次
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 应用场景

运动计时：在健身、跑步等运动场景中，记载运动时间。
学习计时：在学习过程中，记载学习时长，提高学习服从。
游戏计时：在游戏中，设置倒计时或记载游戏时间。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

基于 HTML、CSS 与 JavaScript 的计时器

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块