旋轉時鐘
*
html,body
#clock
.label
let monthtext =
["一月"
,"二月"
,"三月"
,"四月"
,"五月"
,"六月"
,"七月"
,"八月"
,"九月"
,"十月"
,"十一月"
,"十二月"];
let daytext =
["一號"
,"二號"
,"三號"
,"四號"
,"五號"
,"六號"
,"七号"
,"八號"
,"九號"
,"十號"
,"十一號"
,"十二號"
,"十三號"
,"十四號"
,"十五號"
,"十六號"
,"十七號"
,"十八號"
,"十九號"
,"二十號"
,"二十一號"
,"二十二號"
,"二十三號"
,"二十四號"
,"二十五號"
,"二十六號"
,"二十七號"
,"二十八號"
,"二十九號"
,"三十號"
,"三十一號"];
let weektext =
["星期日"
,"星期一"
,"星期二"
,"星期三"
,"星期四"
,"星期五"
,"星期六"];
let hourtext =
["零點"
,"一點"
,"兩點"
,"三點"
,"四點"
,"五點"
,"六點"
,"七點"
,"八點"
,"九點"
,"十點"
,"十一點"
,"十二點"
,"十三點"
,"十四點"
,"十五點"
,"十六點"
,"十七點"
,"十八點"
,"十九點"
,"二十點"
,"二十一點"
,"二十二點"
,"二十三點"];
let minutetext =
["一分"
,"二分"
,"三分"
,"四分"
,"五分"
,"六分"
,"七分"
,"八分"
,"九分"
,"十分"
,"十一分"
,"十二分"
,"十三分"
,"十四分"
,"十五分"
,"十六分"
,"十七分"
,"十八分"
,"十九分"
,"二十分"
,"二十一分"
,"二十二分"
,"二十三分"
,"二十四分"
,"二十五分"
,"二十六分"
,"二十七分"
,"二十八分"
,"二十九分"
,"三十分"
,"三十一分"
,"三十二分"
,"三十三分"
,"三十四分"
,"三十五分"
,"三十六分"
,"三十七分"
,"三十八分"
,"三十九分"
,"四十分"
,"四十一分"
,"四十二分"
,"四十三分"
,"四十四分"
,"四十五分"
,"四十六分"
,"四十七分"
,"四十八分"
,"四十九分"
,"五十分"
,"五十一分"
,"五十二分"
,"五十三分"
,"五十四分"
,"五十五分"
,"五十六分"
,"五十七分"
,"五十八分"
,"五十九分"
,"六十分"];
let secondtext =
["一秒"
,"二秒"
,"三秒"
,"四秒"
,"五秒"
,"六秒"
,"七秒"
,"八秒"
,"九秒"
,"十秒"
,"十一秒"
,"十二秒"
,"十三秒"
,"十四秒"
,"十五秒"
,"十六秒"
,"十七秒"
,"十八秒"
,"十九秒"
,"二十秒"
,"二十一秒"
,"二十二秒"
,"二十三秒"
,"二十四秒"
,"二十五秒"
,"二十六秒"
,"二十七秒"
,"二十八秒"
,"二十九秒"
,"三十秒"
,"三十一秒"
,"三十二秒"
,"三十三秒"
,"三十四秒"
,"三十五秒"
,"三十六秒"
,"三十七秒"
,"三十八秒"
,"三十九秒"
,"四十秒"
,"四十一秒"
,"四十二秒"
,"四十三秒"
,"四十四秒"
,"四十五秒"
,"四十六秒"
,"四十七秒"
,"四十八秒"
,"四十九秒"
,"五十秒"
,"五十一秒"
,"五十二秒"
,"五十三秒"
,"五十四秒"
,"五十五秒"
,"五十六秒"
,"五十七秒"
,"五十八秒"
,"五十九秒"
,"六十秒"];
// 存放dom元素的陣列
let monthlist =
;let daylist =
;let weeklist =
;let hourlist =
;let minutelist =
;let secondlist =
;//二維陣列 存放文字內容及頁面顯示標籤
let timetextset =
[[monthtext, monthlist]
,[daytext, daylist]
,[weektext, weeklist]
,[hourtext, hourlist]
,[minutetext, minutelist]
,[secondtext, secondlist]];
// 判斷是否為旋轉頁面
let isrotating =
false
;//時鐘頁面
let clock;
window.
onload
=function()
,100);
// 旋轉之前定位到當前時間
locatecurrent()
;// 3秒後變成旋轉樣式
settimeout
(function()
,3000);
}// 初始化函式
function
init()
}}// 建立標籤並將文字填充標籤內 接收引數為文字內容
function
createlabel
(text)
function
runtime()
// 變成旋轉時鐘
if(isrotating)}}
}function
initstyle()
}function
locatecurrent()
,50);
}}}function
torotate()
DIY旋轉時鐘
純css，原生js編寫旋轉指標時鐘，附詳細講解 html lang en charset utf 8 diy旋轉時鐘title rel stylesheet href diyclock.css src diyclock.js script head diy旋轉時鐘div class box id c...
用html實現電子時鐘
animation屬性類似於transition，都屬於隨著時間改變元素的屬性值。其主要的區別在於 transition需要觸發乙個時間才會隨著時間而改變css屬性。animation在不需要觸發事件的情況下，也會隨著時間而改變css樣式。1.動畫不需要事件觸發，過渡需要。2.過渡只有一組 開始的狀...
用HTML5 Canvas 實現的 時鐘
基本動畫的步驟 basic animation steps 用canvas畫一幀動畫，通常需要以下四個步驟 1.清空 canvas 除非接下來要畫的內容會完全充滿 canvas 例如背景圖 否則你需要清空所有。最簡單的做法就是用 clearrect 方法。2.儲存 canvas 狀態 如果你要改變一...