首页 > 代码库 > JavaScript+svg绘制的一个动态时钟

JavaScript+svg绘制的一个动态时钟

2024-09-29 08:07:02   220人阅读

结果图：

技术分享

 

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>动态时钟</title>
</head>
<body onl oad="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绘制的一个动态时钟


联系
我们