JavaScript+svg繪制的一個動態時鐘
阿新 • • 發佈：2017-06-02
image oct source 屏幕大小 標記 attr clock brush ctype
結果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>動態時鐘</title>
</head>
<body onload="updateTime();">
<script type="text/javascript">
function updateTime(){ //更新svg時鐘來顯示當前時間
var now =new Date(); //當前時間
var min = now.getMinutes(); //分鐘
var hour = (now.getHours()%12)+min/60;//裝換成可以在時鐘上表示的時間
var minangle = min*6; //每6度表示一分鐘
var hourangle = hour*30; //每30度表示一個小時
//獲取表示時鐘時針和分針的svg元素
var minhand = document.getElementById(‘minutehand‘);
var hourhand = document.getElementById(‘hourhand‘);
//設置這些元素的svg屬性，將他們移動到中面上
minhand.setAttribute("transform","rotate("+minangle+",50,50)");
hourhand.setAttribute("transform","rotate("+hourangle+",50,50)");
//每一分鐘更新下時鐘顯示時間
setTimeout(updateTime,60000);
}
</script>
<style type="text/css">
#clock{ /*用於時鐘的全局樣式*/
stroke:black; /*黑線*/
stroke-linecap: round; /*圓角*/
fill:#eef; /*以淺藍灰色為背景*/
}
#face {stroke-width:3px;} /*時鐘的外邊框*/
#ticks{stroke-width:2;} /*標記每個小時的線段*/
#hourhand {stroke-width:5px;} /*相對較粗的時針*/
#minutehand{stroke-width:3px;} /*相對較細的分針*/
#numbers{
font-family: sans-serif;
font-size: 7pt;
font-weight: bold;
text-anchor: middle;
stroke:none;
fill:black;
}
</style>
<!-- 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="SourceGrahic"/>
<feMergeNode in="shadow"/>
</feMerge>
</filter>
</defs>
<circle id="face" cx="50" cy="50" r="45"/> <!-- 鐘面 -->
<g id="ticks">
<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.970" 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>
<!-- 初始繪制成豎直的指針，之後通過JavaScript代碼來做旋轉 -->
<g id="hands" filter="url(#shadow)"> <!-- 給指針添加陰影 -->
<line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
</g>
</svg>
</body>
</html>
JavaScript+svg繪制的一個動態時鐘