使用純HTML+CSS+JavaScript實(shí)現(xiàn)一個(gè)全功能動(dòng)態(tài)時(shí)鐘
功能亮點(diǎn)
核心功能
- 雙模式時(shí)鐘:數(shù)字時(shí)鐘與模擬時(shí)鐘同步顯示
- 完整日期信息:公歷、農(nóng)歷、星期一應(yīng)俱全
- 傳統(tǒng)文化元素:生肖、星座、24節(jié)氣自動(dòng)顯示
- 時(shí)間統(tǒng)計(jì):
- 從2025年2月6日至今已過多少天
- 今天是本月第幾周
- 今天是本年第幾周
個(gè)性化定制
- 5種主題:經(jīng)典紫、清新綠、浪漫粉、深海藍(lán)、日落橙
- 背景管理:
- 8張精選風(fēng)景美圖循環(huán)切換
- 支持上傳本地圖片
- 可完全去除背景
- 自動(dòng)保存:所有設(shè)置自動(dòng)保存,重啟不丟失
開機(jī)自啟
支持Windows 11開機(jī)自動(dòng)運(yùn)行,打開電腦就能看到精美時(shí)鐘!
技術(shù)實(shí)現(xiàn)
1. 界面設(shè)計(jì)
采用了當(dāng)下流行的**玻璃擬態(tài)(Glassmorphism)**設(shè)計(jì)風(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);
}
效果特點(diǎn):
- 半透明背景
- 模糊效果
- 柔和邊框
- 深度陰影
2. 實(shí)時(shí)時(shí)鐘更新
使用setInterval每秒更新一次:
function updateClock() {
const now = new Date();
// 數(shù)字時(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');
// 模擬時(shí)鐘指針角度計(jì)算
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)歷計(jì)算
雖然完整的農(nóng)歷算法很復(fù)雜,但我實(shí)現(xiàn)了一個(gè)簡(jiǎn)化版本:
function getLunarDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
// 簡(jiǎn)化計(jì)算(實(shí)際應(yīng)用可接入專業(yè)農(nóng)歷庫(kù))
let lunarMonth = month - 1;
let lunarDay = day + 10;
if (lunarDay > 30) {
lunarDay -= 30;
lunarMonth++;
}
return {
month: lunarMonths[lunarMonth],
day: lunarDays[lunarDay - 1]
};
}
4. 周數(shù)計(jì)算
本月第幾周(簡(jiǎn)單算法)
從每月1號(hào)開始,每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))
這是國(guó)際通用標(biāo)準(zhǔn),規(guī)則是:
- 周一為一周的開始
- 包含該年第一個(gè)周四的周為第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方式(最簡(jiǎn)單)
保存文件
- 將完整代碼保存為
clock.html - 放在任意目錄,如
C:\MyApps\clock.html
直接運(yùn)行
- 雙擊文件即可在瀏覽器中打開
設(shè)置開機(jī)自啟
步驟: 1. 按 Win + R 2. 輸入 shell:startup 回車 3. 右鍵 clock.html → 發(fā)送到 → 桌面快捷方式 4. 將快捷方式移動(dòng)到啟動(dòng)文件夾
方案二:使用批處理
創(chuàng)建 啟動(dòng)時(shí)鐘.bat 文件:
@echo off start "" "C:\MyApps\clock.html"
將批處理文件的快捷方式放到啟動(dòng)文件夾即可。
方案三:Delphi桌面應(yīng)用(高級(jí)用戶)
如果你會(huì)Delphi開發(fā),可以創(chuàng)建一個(gè)無(wú)邊框全屏窗口,內(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è)!
功能演示
運(yùn)行結(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ù)加載下一張圖片
動(dòng)畫優(yōu)化
- 使用CSS3動(dòng)畫而非JavaScript
- 利用
transform和opacity實(shí)現(xiàn)硬件加速
功能擴(kuò)展
可以考慮添加:
- 天氣信息:接入天氣API
- 倒計(jì)時(shí)功能:重要日期提醒
- 番茄鐘:時(shí)間管理工具
- 快捷啟動(dòng):常用應(yīng)用快捷方式
- 桌面便簽:記錄待辦事項(xiàng)
- 日歷視圖:月歷顯示
- 自定義字體:更多字體選擇
兼容性優(yōu)化
// 檢測(cè)瀏覽器支持
if (!window.localStorage) {
alert('您的瀏覽器不支持本地存儲(chǔ),設(shè)置將無(wú)法保存');
}
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。隱私模式下可能無(wú)法保存。
Q3: 如何修改起始日期?
A: 在代碼中找到這行:
const startDate = new Date(2025, 1, 6);
修改為你想要的日期(月份從0開始,1=2月)
Q4: 模擬時(shí)鐘不動(dòng)?
A: 檢查CSS的transition屬性是否被覆蓋。確保:
.hand {
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
Q5: 如何全屏顯示?
A: 按F11進(jìn)入全屏模式。
技術(shù)??偨Y(jié)
| 技術(shù) | 用途 |
|---|---|
| HTML5 | 頁(yè)面結(jié)構(gòu) |
| CSS3 | 樣式與動(dòng)畫 |
| JavaScript | 邏輯控制 |
| localStorage | 數(shù)據(jù)持久化 |
| FileReader API | 圖片上傳 |
| Date API | 時(shí)間處理 |
核心特點(diǎn):
- ? 零依賴
- ? 無(wú)需編譯
- ? 無(wú)需服務(wù)器
- ? 離線可用
- ? 跨平臺(tái)
項(xiàng)目亮點(diǎn)
1. 用戶體驗(yàn)設(shè)計(jì)
- 漸進(jìn)增強(qiáng):基礎(chǔ)功能優(yōu)先,高級(jí)功能可選
- 即時(shí)反饋:所有操作都有視覺反饋
- 優(yōu)雅降級(jí):不支持的功能自動(dòng)隱藏
2. 代碼質(zhì)量
- 模塊化:功能分離,易于維護(hù)
- 可讀性:清晰的命名和注釋
- 可擴(kuò)展:預(yù)留接口,方便添加新功能
3. 性能表現(xiàn)
- 輕量級(jí):?jiǎn)挝募?,不?0KB
- 高效率:每秒僅一次更新
- 低資源:CPU和內(nèi)存占用極低
總結(jié)
這個(gè)桌面時(shí)鐘項(xiàng)目展示了如何用純前端技術(shù)打造一個(gè)功能完整的桌面應(yīng)用。通過合理運(yùn)用HTML5的新特性和現(xiàn)代CSS技術(shù),我們實(shí)現(xiàn)了:
美觀的界面:玻璃擬態(tài)設(shè)計(jì),動(dòng)態(tài)漸變背景
強(qiáng)大的功能:雙時(shí)鐘、農(nóng)歷、節(jié)氣、周數(shù)統(tǒng)計(jì)
高度定制:主題、背景完全自定義
智能保存:設(shè)置永久保存
開機(jī)自啟:一次配置,永久使用
最重要的是,無(wú)需任何部署和配置,下載即用!
以上就是使用純HTML+CSS+JavaScript實(shí)現(xiàn)一個(gè)全功能動(dòng)態(tài)時(shí)鐘的詳細(xì)內(nèi)容,更多關(guān)于HTML+CSS+JavaScript動(dòng)態(tài)時(shí)鐘的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript在控件上添加倒計(jì)時(shí)功能的實(shí)現(xiàn)代碼
JavaScript在控件上添加倒計(jì)時(shí)功能,主要原理是利用控件的setEnable(true)/setEnable(false)來進(jìn)行設(shè)置控件的可用與不可用狀態(tài),實(shí)現(xiàn)過程非常簡(jiǎn)單,需要的的朋友參考下吧2017-07-07
JavaScript中的類與實(shí)例實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中的類與實(shí)例實(shí)現(xiàn)方法,非常巧妙的模擬了類與實(shí)例的實(shí)現(xiàn)過程,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
javascript html 靜態(tài)頁(yè)面?zhèn)鲄?shù)
靜態(tài)頁(yè)面中用js獲取頁(yè)面參數(shù)的一些屬性方法,具體的獲取參數(shù),可以搜索本站以前的一些文章。2009-04-04
Layui事件監(jiān)聽的實(shí)現(xiàn)(表單和數(shù)據(jù)表格)
這篇文章主要介紹了Layui事件監(jiān)聽的實(shí)現(xiàn)(表單和數(shù)據(jù)表格),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
html5為表單元素(type為text/password/search/url/telephone/email)新增了一個(gè)placeholder屬性,為輸入框提供一種提示2012-01-01
使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置
Object.defineProperty() 方法直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)已經(jīng)存在的屬性, 并返回這個(gè)對(duì)象。下面這篇文章主要給大家介紹了關(guān)于使用Object.defineProperty如何巧妙找到修改某個(gè)變量的準(zhǔn)確代碼位置的相關(guān)資料,需要的朋友可以參考下2018-11-11

