1. 程式人生 > >JavaScript+svg繪制的一個動態時鐘

JavaScript+svg繪制的一個動態時鐘

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繪制的一個動態時鐘