本文實(shí)例為大家分享了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE HTML><html><meta charset="utf-8"><head><title>Analog Clock</title><script>function updateTime() { var now = new Date(); // 當(dāng)前時(shí)間 var min = now.getMinutes(); // 分鐘 var hour = (now.getHours() % 12) + min/60; // 轉(zhuǎn)行成可以在時(shí)鐘上表示的時(shí)間 var seconds = now.getSeconds(); //秒鐘 var minangle = min*6; // 6度表示一分鐘 var hourangle = hour*30; // 30 表示一小時(shí) var secrangel = seconds * 6; // 6度表示一秒鐘 // 獲取表示時(shí)鐘時(shí)針的SVG元素 var minhand = document.getElementById("minutehand"); var hourhand = document.getElementById("hourhand"); var secondhand = document.getElementById("secondhand"); // 設(shè)置這些元素的SVG屬性，將它們移動(dòng)到鐘面上 minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)"); hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)"); secondhand.setAttribute("transform", "rotate(" + secrangel + ",50,50)"); // 每秒鐘更新下時(shí)鐘顯示時(shí)間 setTimeout(updateTime, 1000);}</script><style>#clock { stroke: black; stroke-linecap: round; fill: #eef; }#face { stroke-width: 2px;} #ticks { stroke-width: 2px; } #hourhand {stroke-width: 3px;} #minutehand {stroke-width: 2px;} #secondhand{stroke-width: 1px;}#numbers { font-family: sans-serif; font-size: 7pt; font-weight: bold; text-anchor: middle; stroke: none; fill: black;}</style></head><body onload="updateTime()"> <!-- viewBox是坐標(biāo)系，width和height是指屏幕大小 --> <svg id="clock" viewBox="0 0 100 100" width="500" height="500"> <defs> <!-- 定義下拉陰影的濾鏡 --> <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" /> <feOffset in="blur" dx="1" dy="1" result="shadow" /> <feMerge> <feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/> </feMerge> </filter> </defs> <circle id="face" cx="50" cy="50" r="45"/> <!-- 鐘緬 --> <g id="ticks"> <!-- 12小時(shí)的刻度 --> <line x1='50' y1='5.000' x2='50.00' y2='10.00'/> <line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/> <line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/> <line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/> <line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/> <line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/> <line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/> <line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/> <line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/> <line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/> <line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/> <line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/> </g> <g id="numbers"> <!-- 標(biāo)記重要的幾個(gè)刻度值--> <text x="50" y="18">12</text><text x="85" y="53">3</text> <text x="50" y="88">6</text><text x="15" y="53">9</text> </g> <!-- 初始繪制成豎直的指針，之后通過(guò)js來(lái)做旋轉(zhuǎn) --> <g id="hands" filter="url(#shadow)"> <!-- 給指針添加陰影 --> <line id="hourhand" x1="50" y1="50" x2="50" y2="25"/> <line id="minutehand" x1="50" y1="50" x2="50" y2="18"/> <line id="secondhand" x1="50" y1="50" x2="50" y2="11"/> </g> </svg></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
