使用純HTML+CSS+JavaScript實現(xiàn)一個全功能動態(tài)時鐘
功能亮點
核心功能
- 雙模式時鐘:數(shù)字時鐘與模擬時鐘同步顯示
- 完整日期信息:公歷、農(nóng)歷、星期一應(yīng)俱全
- 傳統(tǒng)文化元素:生肖、星座、24節(jié)氣自動顯示
- 時間統(tǒng)計:
- 從2025年2月6日至今已過多少天
- 今天是本月第幾周
- 今天是本年第幾周
個性化定制
- 5種主題:經(jīng)典紫、清新綠、浪漫粉、深海藍(lán)、日落橙
- 背景管理:
- 8張精選風(fēng)景美圖循環(huán)切換
- 支持上傳本地圖片
- 可完全去除背景
- 自動保存:所有設(shè)置自動保存,重啟不丟失
開機(jī)自啟
支持Windows 11開機(jī)自動運行,打開電腦就能看到精美時鐘!
技術(shù)實現(xiàn)
1. 界面設(shè)計
采用了當(dāng)下流行的**玻璃擬態(tài)(Glassmorphism)**設(shè)計風(fēng)格:
.clock-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
效果特點:
- 半透明背景
- 模糊效果
- 柔和邊框
- 深度陰影
2. 實時時鐘更新
使用setInterval每秒更新一次:
function updateClock() {
const now = new Date();
// 數(shù)字時鐘
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
// 模擬時鐘指針角度計算
const secondAngle = (now.getSeconds() / 60) * 360;
const minuteAngle = ((now.getMinutes() + now.getSeconds() / 60) / 60) * 360;
const hourAngle = ((now.getHours() % 12 + now.getMinutes() / 60) / 12) * 360;
}
setInterval(updateClock, 1000);
3. 農(nóng)歷計算
雖然完整的農(nóng)歷算法很復(fù)雜,但我實現(xiàn)了一個簡化版本:
function getLunarDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
// 簡化計算(實際應(yīng)用可接入專業(yè)農(nóng)歷庫)
let lunarMonth = month - 1;
let lunarDay = day + 10;
if (lunarDay > 30) {
lunarDay -= 30;
lunarMonth++;
}
return {
month: lunarMonths[lunarMonth],
day: lunarDays[lunarDay - 1]
};
}
4. 周數(shù)計算
本月第幾周(簡單算法)
從每月1號開始,每7天算一周:
function getWeekOfMonth(date) {
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
const dayOfMonth = date.getDate();
const firstDayOfWeek = firstDay.getDay();
const weekNumber = Math.ceil((dayOfMonth + firstDayOfWeek) / 7);
return weekNumber;
}
本年第幾周(ISO 8601標(biāo)準(zhǔn))
這是國際通用標(biāo)準(zhǔn),規(guī)則是:
- 周一為一周的開始
- 包含該年第一個周四的周為第1周
function getWeekOfYear(date) {
const target = new Date(date.valueOf());
const dayNumber = (date.getDay() + 6) % 7;
target.setDate(target.getDate() - dayNumber + 3);
const firstThursday = new Date(target.getFullYear(), 0, 4);
const weekNumber = Math.ceil((((target - firstThursday) / 86400000) + 1) / 7);
return weekNumber;
}
5. 數(shù)據(jù)持久化
使用localStorage保存用戶設(shè)置:
// 保存設(shè)置
function changeTheme() {
currentTheme = (currentTheme + 1) % themes.length;
// ... 應(yīng)用主題
localStorage.setItem('clockTheme', currentTheme);
}
// 加載設(shè)置
function loadSettings() {
const savedTheme = localStorage.getItem('clockTheme');
if (savedTheme !== null) {
currentTheme = parseInt(savedTheme);
// ... 應(yīng)用保存的主題
}
}
保存的數(shù)據(jù):
- 當(dāng)前主題選擇
- 背景圖片索引
- 上傳的自定義圖片(Base64編碼)
6. 圖片上傳功能
支持用戶上傳本地圖片作為背景:
function handleImageUpload(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
// 將圖片轉(zhuǎn)為Base64保存
localStorage.setItem('clockCustomImage', e.target.result);
// 應(yīng)用背景
document.getElementById('bgImage').src = e.target.result;
};
reader.readAsDataURL(file);
}
}
使用指南
方案一:純HTML方式(最簡單)
保存文件
- 將完整代碼保存為
clock.html - 放在任意目錄,如
C:\MyApps\clock.html
直接運行
- 雙擊文件即可在瀏覽器中打開
設(shè)置開機(jī)自啟
步驟: 1. 按 Win + R 2. 輸入 shell:startup 回車 3. 右鍵 clock.html → 發(fā)送到 → 桌面快捷方式 4. 將快捷方式移動到啟動文件夾
方案二:使用批處理
創(chuàng)建 啟動時鐘.bat 文件:
@echo off start "" "C:\MyApps\clock.html"
將批處理文件的快捷方式放到啟動文件夾即可。
方案三:Delphi桌面應(yīng)用(高級用戶)
如果你會Delphi開發(fā),可以創(chuàng)建一個無邊框全屏窗口,內(nèi)嵌TEdgeBrowser控件:
procedure TFormClock.FormCreate(Sender: TObject);
var
HtmlPath: string;
begin
Self.BorderStyle := bsNone;
Self.WindowState := wsMaximized;
HtmlPath := ExtractFilePath(Application.ExeName) + 'clock.html';
EdgeBrowser1.Navigate('file:///' +
StringReplace(HtmlPath, '\', '/', [rfReplaceAll]));
end;
編譯后生成exe,開機(jī)自啟更專業(yè)!
功能演示
運行結(jié)果

主題切換效果
經(jīng)典紫
- 漸變:深紫 → 紫紅
- 強(qiáng)調(diào)色:金黃
清新綠
- 漸變:青綠 → 亮綠
- 強(qiáng)調(diào)色:明黃
浪漫粉
- 漸變:粉紫 → 玫紅
- 強(qiáng)調(diào)色:淡黃
深海藍(lán)
- 漸變:天藍(lán) → 青藍(lán)
- 強(qiáng)調(diào)色:金黃
日落橙
- 漸變:玫粉 → 金黃
- 強(qiáng)調(diào)色:白色
優(yōu)化建議
性能優(yōu)化
減少DOM操作
- 使用
textContent代替innerHTML - 批量更新樣式
圖片優(yōu)化
- 壓縮圖片大小
- 使用懶加載
- 預(yù)加載下一張圖片
動畫優(yōu)化
- 使用CSS3動畫而非JavaScript
- 利用
transform和opacity實現(xiàn)硬件加速
功能擴(kuò)展
可以考慮添加:
- 天氣信息:接入天氣API
- 倒計時功能:重要日期提醒
- 番茄鐘:時間管理工具
- 快捷啟動:常用應(yīng)用快捷方式
- 桌面便簽:記錄待辦事項
- 日歷視圖:月歷顯示
- 自定義字體:更多字體選擇
兼容性優(yōu)化
// 檢測瀏覽器支持
if (!window.localStorage) {
alert('您的瀏覽器不支持本地存儲,設(shè)置將無法保存');
}
if (!window.FileReader) {
// 隱藏上傳圖片按鈕
document.getElementById('uploadBtn').style.display = 'none';
}
常見問題
Q1: 換圖片沒反應(yīng)?
A: 檢查網(wǎng)絡(luò)連接。圖片來自Unsplash,需要聯(lián)網(wǎng)??梢允褂?quot;上傳圖片"功能使用本地圖片。
Q2: 設(shè)置沒有保存?
A: 檢查瀏覽器是否啟用了localStorage。隱私模式下可能無法保存。
Q3: 如何修改起始日期?
A: 在代碼中找到這行:
const startDate = new Date(2025, 1, 6);
修改為你想要的日期(月份從0開始,1=2月)
Q4: 模擬時鐘不動?
A: 檢查CSS的transition屬性是否被覆蓋。確保:
.hand {
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
Q5: 如何全屏顯示?
A: 按F11進(jìn)入全屏模式。
技術(shù)棧總結(jié)
| 技術(shù) | 用途 |
|---|---|
| HTML5 | 頁面結(jié)構(gòu) |
| CSS3 | 樣式與動畫 |
| JavaScript | 邏輯控制 |
| localStorage | 數(shù)據(jù)持久化 |
| FileReader API | 圖片上傳 |
| Date API | 時間處理 |
核心特點:
- ? 零依賴
- ? 無需編譯
- ? 無需服務(wù)器
- ? 離線可用
- ? 跨平臺
項目亮點
1. 用戶體驗設(shè)計
- 漸進(jìn)增強(qiáng):基礎(chǔ)功能優(yōu)先,高級功能可選
- 即時反饋:所有操作都有視覺反饋
- 優(yōu)雅降級:不支持的功能自動隱藏
2. 代碼質(zhì)量
- 模塊化:功能分離,易于維護(hù)
- 可讀性:清晰的命名和注釋
- 可擴(kuò)展:預(yù)留接口,方便添加新功能
3. 性能表現(xiàn)
- 輕量級:單文件,不到20KB
- 高效率:每秒僅一次更新
- 低資源:CPU和內(nèi)存占用極低
總結(jié)
這個桌面時鐘項目展示了如何用純前端技術(shù)打造一個功能完整的桌面應(yīng)用。通過合理運用HTML5的新特性和現(xiàn)代CSS技術(shù),我們實現(xiàn)了:
美觀的界面:玻璃擬態(tài)設(shè)計,動態(tài)漸變背景
強(qiáng)大的功能:雙時鐘、農(nóng)歷、節(jié)氣、周數(shù)統(tǒng)計
高度定制:主題、背景完全自定義
智能保存:設(shè)置永久保存
開機(jī)自啟:一次配置,永久使用
最重要的是,無需任何部署和配置,下載即用!
以上就是使用純HTML+CSS+JavaScript實現(xiàn)一個全功能動態(tài)時鐘的詳細(xì)內(nèi)容,更多關(guān)于HTML+CSS+JavaScript動態(tài)時鐘的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
玩轉(zhuǎn)JavaScript函數(shù):apply/call/bind技巧
歡迎來到這篇關(guān)于JavaScript中apply、call、bind函數(shù)的指南,這里充滿了實用技巧和深入理解,讓你的編程之旅更加游刃有余,趕快翻開這個神秘的“魔法書”,讓我們一起探索吧!2024-01-01
javascript在事件監(jiān)聽方面的兼容性小結(jié)
javascript 在事件監(jiān)聽方面的兼容性總結(jié),注意是由于多個瀏覽器的不一致,導(dǎo)致大家在js書寫時需要考慮多個瀏覽器的兼容性。2010-04-04
微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能
這篇文章主要介紹了微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實現(xiàn)示例
需要一個用戶上傳頭像預(yù)覽的功能,因此寫了一段上傳圖片預(yù)覽JS腳本,Input file圖片預(yù)覽的實現(xiàn),需要的朋友可以看看2014-10-10
用JavaScript實現(xiàn)瀏覽器截圖功能的全過程
在Web開發(fā)中實現(xiàn)網(wǎng)頁截圖功能可以幫助我們保存網(wǎng)頁內(nèi)容、生成海報、制作截圖分享等,這篇文章主要介紹了用JavaScript實現(xiàn)瀏覽器截圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07

