JavaScript+svg绘制的一个动态时钟
结果图：
代码如下：
<!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>
