前言
在现代生活中，计时工具无处不在，从厨房烹饪到体育比赛，再到日常任务管理，它们都是不可或缺的帮手。今天，我将向大家介绍一个网页版的多功能计时工具，它集模拟时钟、秒表和倒计时器于一体，方便实用，且无需安装任何额外软件。
在webstorm中新建与运行这个项目。
一、项目概述
这个多功能计时工具是一个简单的HTML页面，包含CSS样式和JavaScript脚本。它提供了三个主要功能：
- 模拟时钟：一个动态的、实时更新的模拟时钟，显示当前的小时、分钟和秒。
- 秒表计时器：一个可以启动、暂停和重置的秒表，用于精确计时。
- 倒计时器：用户可以输入分钟数，然后启动倒计时，倒计时结束后会弹出提示。
二、页面设计与样式
页面整体采用简洁明快的设计风格，背景色为浅灰色，每个计时工具模块都有白色背景和圆角边框，看起来既干净又现代。模拟时钟位于页面顶部，秒表和倒计时器紧随其后，每个模块都有清晰的标题和易于操作的按钮。
CSS样式不仅确保了页面的美观，还通过flex布局实现了模块之间的灵活排列和间距控制。按钮的悬停效果增加了用户交互的愉悦感。
三、功能实现
模拟时钟
模拟时钟使用JavaScript的Date对象获取当前时间，并计算出时针、分针和秒针的角度。通过CSS的transform属性，将指针旋转到正确的位置。每秒更新一次，确保时钟的实时性。
秒表计时器
秒表功能通过setInterval函数每秒更新一次显示的时间。当用户点击“开始”按钮时，计时开始；点击“暂停”按钮时，计时停止；点击“重置”按钮时，计时归零。时间格式采用HH:MM:SS。
倒计时器
倒计时器允许用户输入分钟数，然后开始倒计时。倒计时每秒更新一次，当时间到达零时，弹出提示框通知用户。倒计时器的开始和重置操作与秒表类似，但时间计算方式有所不同。
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多功能计时工具</title>
<style>
/* 通用样式 */
body {
font-family: 'Arial', sans-serif;
background: #f5f7fa;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
margin: 0;
}
.module {
width: 300px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.module h2 {
margin-top: 0;
color: #333333;
}
/* 时钟模块 */
#analog-clock {
width: 200px;
height: 200px;
border: 2px solid #333333;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
.hand {
position: absolute;
transform-origin: bottom center;
background: #333333;
transition: transform 0.05s ease-in-out;
}
/* 秒表模块 */
.stopwatch, .countdown {
background: #28a745;
color: #ffffff;
}
.stopwatch button, .countdown button {
background: #218838;
border: none;
color: #ffffff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
transition: background 0.3s ease;
}
.stopwatch button:hover, .countdown button:hover {
background: #1e7e34;
}
/* 倒计时模块 */
.countdown {
background: #dc3545;
}
.countdown input[type="number"] {
width: calc(100% - 40px);
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 模拟时钟 -->
<div class="module">
<h2>模拟时钟</h2>
<div id="analog-clock">
<div id="hour-hand" class="hand"></div>
<div id="minute-hand" class="hand"></div>
<div id="second-hand" class="hand"></div>
</div>
</div>
<!-- 秒表计时器 -->
<div class="module stopwatch">
<h2>秒表计时器</h2>
<div id="stopwatch-display">00:00:00</div>
<button onclick="startStopwatch()">开始</button>
<button onclick="pauseStopwatch()">暂停</button>
<button onclick="resetStopwatch()">重置</button>
</div>
<!-- 倒计时器 -->
<div class="module countdown">
<h2>倒计时器</h2>
<input type="number" id="minutes" placeholder="分钟" min="1">
<div id="countdown-display">00:00</div>
<button onclick="startCountdown()">开始</button>
<button onclick="resetCountdown()">重置</button>
</div>
<script>
// ========== 模拟时钟 ==========
function updateClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 指针角度计算
const hourDeg = (hours * 30) + (minutes * 0.5);
const minuteDeg = (minutes * 6) + (seconds * 0.1);
const secondDeg = seconds * 6;
// 更新指针样式
document.getElementById('hour-hand').style.transform = `rotate(${hourDeg}deg)`;
document.getElementById('minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
document.getElementById('second-hand').style.transform = `rotate(${secondDeg}deg)`;
// 指针尺寸
const hands = {
'hour-hand': { length: '50px', thickness: '4px' },
'minute-hand': { length: '70px', thickness: '3px' },
'second-hand': { length: '90px', thickness: '2px' }
};
Object.entries(hands).forEach(([id, style]) => {
const hand = document.getElementById(id);
hand.style.width = style.thickness;
hand.style.height = style.length;
hand.style.left = `calc(50% - ${style.thickness}/2)`;
hand.style.top = `calc(50% - ${style.length})`;
});
}
setInterval(updateClock, 1000);
// ========== 秒表功能 ==========
let stopwatchRunning = false;
let startTime = 0;
let elapsedTime = 0;
let timerInterval;
function startStopwatch() {
if (!stopwatchRunning) {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(updateStopwatch, 10);
stopwatchRunning = true;
}
}
function pauseStopwatch() {
clearInterval(timerInterval);
stopwatchRunning = false;
}
function resetStopwatch() {
clearInterval(timerInterval);
elapsedTime = 0;
document.getElementById('stopwatch-display').textContent = "00:00:00";
stopwatchRunning = false;
}
function updateStopwatch() {
elapsedTime = Date.now() - startTime;
const formattedTime = new Date(elapsedTime).toISOString().substr(11, 8);
document.getElementById('stopwatch-display').textContent = formattedTime;
}
// ========== 倒计时功能 ==========
let countdownInterval;
let remainingTime = 0;
function startCountdown() {
if (!countdownInterval) {
const minutes = parseInt(document.getElementById('minutes').value) || 1;
remainingTime = minutes * 60 * 1000;
countdownInterval = setInterval(() => {
remainingTime -= 1000;
if (remainingTime <= 0) {
clearInterval(countdownInterval);
alert('倒计时结束!');
}
updateCountdownDisplay();
}, 1000);
}
}
function resetCountdown() {
clearInterval(countdownInterval);
countdownInterval = null;
remainingTime = 0;
updateCountdownDisplay();
}
function updateCountdownDisplay() {
const minutes = Math.floor(remainingTime / 60000);
const seconds = Math.floor((remainingTime % 60000) / 1000);
document.getElementById('countdown-display').textContent =
`${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
</script>
</body>
</html>
四、优化界面
优化的核心要点：
-
布局：整体（左中右）、模块内（标题左上、内容居中）
-
配色：整体（灰色）、模块内（黑色、蓝色、红色–模块内色系保持一致，使用透明度做对比）、使用渐变修饰
-
元素：元素位置、大小；元素修饰（圆角、小图标、模块鼠标响应动态）
-
字号字体：标题加粗，与文本一样字体字号（灰白），输入框与按钮字号小（更白）
经过优化的界面与代码：
与未经过优化的界面对比：
<!DOCTYPE html>
<html lang="en">
<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 {
font-family: 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
place-items: center;
}
/* 模块统一样式 */
.module {
background: white;
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
transition: transform 0.2s;
}
.module:hover {
transform: translateY(-5px);
}
h2 {
color: #2c3e50;
margin-bottom: 1.5rem;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* 模拟时钟 */
#analog-clock {
width: 200px;
height: 200px;
border: 4px solid #2c3e50;
border-radius: 50%;
position: relative;
margin: 1rem auto;
background: #fff;
box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}
/* 时钟刻度 */
.mark {
position: absolute;
width: 2px;
height: 10px;
background: #666;
transform-origin: 50% 100px;
}
.mark-hour {
width: 3px;
height: 15px;
background: #2c3e50;
}
/* 时钟指针 */
.hand {
position: absolute;
transform-origin: bottom center;
border-radius: 4px;
transition: transform 0.3s cubic-bezier(0.4, 2.3, 0.3, 1);
}
#hour-hand {
width: 5px;
height: 50px;
background: #2c3e50;
top: 25%;
left: calc(50% - 2.5px);
}
#minute-hand {
width: 4px;
height: 70px;
background: #3498db;
top: 15%;
left: calc(50% - 2px);
}
#second-hand {
width: 2px;
height: 80px;
background: #e74c3c;
top: 10%;
left: calc(50% - 1px);
}
/* 数字显示 */
.digital-display {
font-size: 2.5rem;
font-family: 'Fira Code', monospace;
text-align: center;
margin: 1.5rem 0;
color: #34495e;
letter-spacing: 2px;
}
/* 按钮样式 */
.btn-group {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
justify-content: center;
}
button {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 0.8rem;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
button:hover {
filter: brightness(1.1);
transform: scale(1.05);
}
button:active {
transform: scale(0.95);
}
/* 秒表模块 */
.stopwatch {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}
/* 倒计时模块 */
.countdown {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}
input[type="number"] {
padding: 0.8rem;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 0.8rem;
background: rgba(255,255,255,0.1);
color: white;
font-size: 1rem;
width: 100%;
margin: 1rem 0;
backdrop-filter: blur(5px);
}
input::placeholder {
color: rgba(255,255,255,0.7);
}
/* 时钟刻度生成 */
.mark-container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 模拟时钟 -->
<div class="module">
<h2>模拟时钟</h2>
<div id="analog-clock">
<div id="hour-hand" class="hand"></div>
<div id="minute-hand" class="hand"></div>
<div id="second-hand" class="hand"></div>
</div>
</div>
<!-- 秒表计时器 -->
<div class="module stopwatch">
<h2>秒表计时器</h2>
<div id="stopwatch-display">00:00:00</div>
<button onclick="startStopwatch()">开始</button>
<button onclick="pauseStopwatch()">暂停</button>
<button onclick="resetStopwatch()">重置</button>
</div>
<!-- 倒计时器 -->
<div class="module countdown">
<h2>倒计时器</h2>
<input type="number" id="minutes" placeholder="分钟" min="1">
<div id="countdown-display">00:00</div>
<button onclick="startCountdown()">开始</button>
<button onclick="resetCountdown()">重置</button>
</div>
<script>
// ========== 模拟时钟 ==========
function updateClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 指针角度计算
const hourDeg = (hours * 30) + (minutes * 0.5);
const minuteDeg = (minutes * 6) + (seconds * 0.1);
const secondDeg = seconds * 6;
// 更新指针样式
document.getElementById('hour-hand').style.transform = `rotate(${hourDeg}deg)`;
document.getElementById('minute-hand').style.transform = `rotate(${minuteDeg}deg)`;
document.getElementById('second-hand').style.transform = `rotate(${secondDeg}deg)`;
// 指针尺寸
const hands = {
'hour-hand': { length: '50px', thickness: '4px' },
'minute-hand': { length: '70px', thickness: '3px' },
'second-hand': { length: '90px', thickness: '2px' }
};
Object.entries(hands).forEach(([id, style]) => {
const hand = document.getElementById(id);
hand.style.width = style.thickness;
hand.style.height = style.length;
hand.style.left = `calc(50% - ${style.thickness}/2)`;
hand.style.top = `calc(50% - ${style.length})`;
});
}
setInterval(updateClock, 1000);
// ========== 秒表功能 ==========
let stopwatchRunning = false;
let startTime = 0;
let elapsedTime = 0;
let timerInterval;
function startStopwatch() {
if (!stopwatchRunning) {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(updateStopwatch, 10);
stopwatchRunning = true;
}
}
function pauseStopwatch() {
clearInterval(timerInterval);
stopwatchRunning = false;
}
function resetStopwatch() {
clearInterval(timerInterval);
elapsedTime = 0;
document.getElementById('stopwatch-display').textContent = "00:00:00";
stopwatchRunning = false;
}
function updateStopwatch() {
elapsedTime = Date.now() - startTime;
const formattedTime = new Date(elapsedTime).toISOString().substr(11, 8);
document.getElementById('stopwatch-display').textContent = formattedTime;
}
// ========== 倒计时功能 ==========
let countdownInterval;
let remainingTime = 0;
function startCountdown() {
if (!countdownInterval) {
const minutes = parseInt(document.getElementById('minutes').value) || 1;
remainingTime = minutes * 60 * 1000;
countdownInterval = setInterval(() => {
remainingTime -= 1000;
if (remainingTime <= 0) {
clearInterval(countdownInterval);
alert('倒计时结束!');
}
updateCountdownDisplay();
}, 1000);
}
}
function resetCountdown() {
clearInterval(countdownInterval);
countdownInterval = null;
remainingTime = 0;
updateCountdownDisplay();
}
function updateCountdownDisplay() {
const minutes = Math.floor(remainingTime / 60000);
const seconds = Math.floor((remainingTime % 60000) / 1000);
document.getElementById('countdown-display').textContent =
`${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
</script>
</body>
</html>
在这里插入代码片
五、使用体验
这个多功能计时工具的使用体验非常流畅。模拟时钟的指针平滑移动，秒表和倒计时器的响应迅速且准确。用户界面的设计直观易懂，即使是初次使用的用户也能快速上手。
结语
这个网页版的多功能计时工具是一个结合了模拟时钟、秒表和倒计时器的实用小工具。它不仅功能全面，而且设计简洁美观，非常适合在日常学习、工作或娱乐中使用。如果你需要一个方便易用的计时工具，不妨试试这个网页版的多功能计时工具吧！
你可以直接将上述代码复制到一个HTML文件中，然后在浏览器中打开，就能立即体验这个多功能计时工具带来的便利了。希望你喜欢这个小项目！
扫一扫
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
