這篇文章給大家介紹怎么在JavaScript中使用SVG實現動態時鐘效果，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title>Analog Clock</title>
<script>
function updateTime() {
var now = new Date(); // 當前時間
var min = now.getMinutes(); // 分鐘
var hour = (now.getHours() % 12) + min/60; // 轉行成可以在時鐘上表示的時間
var seconds = now.getSeconds(); //秒鐘
var minangle = min*6; // 6度表示一分鐘
var hourangle = hour*30; // 30 表示一小時
var secrangel = seconds * 6; // 6度表示一秒鐘
// 獲取表示時鐘時針的SVG元素
var minhand = document.getElementById("minutehand");
var hourhand = document.getElementById("hourhand");
var secondhand = document.getElementById("secondhand");
// 設置這些元素的SVG屬性，將它們移動到鐘面上
minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
secondhand.setAttribute("transform", "rotate(" + secrangel + ",50,50)");
// 每秒鐘更新下時鐘顯示時間
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是坐標系，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小時的刻度 -->
<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"> <!-- 標記重要的幾個刻度值-->
<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>
<!-- 初始繪制成豎直的指針，之后通過js來做旋轉 -->
<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>關于怎么在JavaScript中使用SVG實現動態時鐘效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
