# JS+HTML怎么制作時鐘
## 前言
在網頁開發中，動態時鐘是一個經典且實用的功能。本文將詳細介紹如何使用原生JavaScript(JS)和HTML從零開始構建一個功能完整的網頁時鐘，涵蓋數字時鐘、模擬時鐘兩種形式以及進階優化技巧。
## 目錄
1. [基礎HTML結構](#基礎html結構)
2. [數字時鐘實現](#數字時鐘實現)
- 2.1 [獲取時間信息](#獲取時間信息)
- 2.2 [格式化顯示](#格式化顯示)
- 2.3 [實時更新](#實時更新)
3. [模擬時鐘實現](#模擬時鐘實現)
- 3.1 [時鐘表盤繪制](#時鐘表盤繪制)
- 3.2 [指針動態旋轉](#指針動態旋轉)
- 3.3 [中心點裝飾](#中心點裝飾)
4. [樣式優化技巧](#樣式優化技巧)
5. [完整代碼示例](#完整代碼示例)
6. [擴展功能](#擴展功能)
7. [常見問題](#常見問題)
## 基礎HTML結構
首先創建基本的HTML框架，包含時鐘的容器元素：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS時鐘演示</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.clock-container {
text-align: center;
}
</style>
</head>
<body>
<div class="clock-container">
<!-- 數字時鐘 -->
<div id="digital-clock" class="clock"></div>
<!-- 模擬時鐘 -->
<div id="analog-clock" class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
<div class="center-point"></div>
</div>
</div>
</div>
<script src="clock.js"></script>
</body>
</html>
在clock.js中，我們首先需要獲取當前時間：
function getCurrentTime() {
const now = new Date();
return {
hours: now.getHours(),
minutes: now.getMinutes(),
seconds: now.getSeconds()
};
}
將時間格式化為兩位數顯示：
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
function updateDigitalClock() {
const time = getCurrentTime();
const digitalClock = document.getElementById('digital-clock');
digitalClock.textContent = `${formatTime(time.hours)}:${formatTime(time.minutes)}:${formatTime(time.seconds)}`;
}
使用setInterval實現每秒更新：
// 初始更新
updateDigitalClock();
// 設置定時器，每秒更新一次
setInterval(updateDigitalClock, 1000);
添加CSS樣式創建表盤外觀：
.analog-clock {
width: 200px;
height: 200px;
border: 10px solid #333;
border-radius: 50%;
margin: 30px auto;
position: relative;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.clock-face {
width: 100%;
height: 100%;
position: relative;
}
/* 時鐘刻度 */
.clock-face::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
z-index: 10;
}
計算指針旋轉角度并應用CSS變換：
function updateAnalogClock() {
const time = getCurrentTime();
const secondHand = document.querySelector('.second-hand');
const minuteHand = document.querySelector('.minute-hand');
const hourHand = document.querySelector('.hour-hand');
const secondsDegrees = (time.seconds / 60) * 360 + 90;
const minutesDegrees = (time.minutes / 60) * 360 + (time.seconds / 60) * 6 + 90;
const hoursDegrees = (time.hours / 12) * 360 + (time.minutes / 60) * 30 + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
// 初始更新
updateAnalogClock();
// 設置定時器
setInterval(updateAnalogClock, 1000);
添加指針樣式：
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom;
background: #333;
border-radius: 5px;
}
.hour-hand {
width: 6px;
height: 50px;
margin-left: -3px;
}
.minute-hand {
width: 4px;
height: 70px;
margin-left: -2px;
}
.second-hand {
width: 2px;
height: 90px;
margin-left: -1px;
background: red;
}
.center-point {
position: absolute;
width: 12px;
height: 12px;
background: #333;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
}
.center-point::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hand {
transition: transform 0.3s cubic-bezier(0.4, 2.3, 0.3, 1);
}
function addClockMarks() {
const clockFace = document.querySelector('.clock-face');
for (let i = 1; i <= 12; i++) {
const mark = document.createElement('div');
mark.className = 'clock-mark';
mark.style.transform = `rotate(${i * 30}deg)`;
clockFace.appendChild(mark);
}
}
@media (max-width: 600px) {
.analog-clock {
width: 150px;
height: 150px;
}
/* 調整指針尺寸 */
}
// clock.js
document.addEventListener('DOMContentLoaded', function() {
// 數字時鐘
function updateDigitalClock() {
const time = getCurrentTime();
document.getElementById('digital-clock').textContent =
`${formatTime(time.hours)}:${formatTime(time.minutes)}:${formatTime(time.seconds)}`;
}
// 模擬時鐘
function updateAnalogClock() {
const time = getCurrentTime();
const secondsDegrees = (time.seconds / 60) * 360 + 90;
const minutesDegrees = (time.minutes / 60) * 360 + (time.seconds / 60) * 6 + 90;
const hoursDegrees = (time.hours / 12) * 360 + (time.minutes / 60) * 30 + 90;
document.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;
document.querySelector('.minute-hand').style.transform = `rotate(${minutesDegrees}deg)`;
document.querySelector('.hour-hand').style.transform = `rotate(${hoursDegrees}deg)`;
}
// 輔助函數
function getCurrentTime() {
const now = new Date();
return {
hours: now.getHours(),
minutes: now.getMinutes(),
seconds: now.getSeconds()
};
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
// 初始化
updateDigitalClock();
updateAnalogClock();
addClockMarks();
// 定時更新
setInterval(() => {
updateDigitalClock();
updateAnalogClock();
}, 1000);
function addClockMarks() {
const clockFace = document.querySelector('.clock-face');
for (let i = 1; i <= 12; i++) {
const mark = document.createElement('div');
mark.className = 'clock-mark';
mark.style.transform = `rotate(${i * 30}deg)`;
clockFace.appendChild(mark);
}
}
});
function getCurrentDate() {
const now = new Date();
return `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`;
}
// 在HTML中添加日期顯示元素
function toggleTheme() {
document.body.classList.toggle('dark-theme');
}
function getWorldTime(timezone) {
return new Date().toLocaleTimeString('zh-CN', { timeZone: timezone });
}
時鐘不更新：
指針跳動不流暢：
時區問題：
跨瀏覽器兼容性：
通過本文的學習，您應該已經掌握了使用純JS和HTML創建動態時鐘的核心技術。這個項目雖然基礎，但包含了前端開發中許多重要概念：DOM操作、定時器、CSS變換等。建議在此基礎上繼續擴展功能，如添加鬧鐘、計時器等，以加深對前端技術的理解。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
