使用6行javascript代码制作一个SVG模拟时钟

查看演示 下载地址

本教程是一个关于使用HTML5 SVG制作模拟时钟效果的教程。在以前的html5 svg模拟时钟插件中，有一款类似的效果：html5 svg简单的模拟时钟特效。如何使代码更简洁是本教程的研究方向。

HTML结构:

html结构包括几个部分，都使用SVG制作。一个是时钟的圆盘，还有时针、分针和秒针。

<svg id="clock" viewBox="0 0 100 100">
    <circle id="face" cx="50" cy="50" r="45"/>
    <g id="hands">
    <rect id="hour" x="48.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min" x="48" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec" x1="50" y1="50" x2="50" y2="16" />
    </g>
</svg>
                            

以上的svg代码不是十分难懂。<circle>元素的半径是45个单位，它以SVG元素的左上角50个单位为圆心。时针、分针和秒针放置在圆的里面。时针和分针的长度为40个单位，并且有圆角（在SVG中，圆角用rx和ry表示）。

CSS样式：

时针、分针和秒针的CSS样式如下：

#face { stroke-width: 2px; stroke: #fff; }
#hour, #min, #sec { stroke-width: 1px; fill: #333; stroke: #555; }
#sec { stroke: #f55; }
                            

这时候，时针、分针和秒针都处于12点钟的位置。接下来可以使用JAVASCRIPT来使时钟动起来。

JAVASCRIPT

setInterval(function() {
    function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
    }
    var d = new Date()
    r(sec, 6*d.getSeconds())
    r(min, 6*d.getMinutes())
    r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)                                
                            

js代码使用setInterval来包含整个脚本，在里面的代码每1000毫秒运行一次。

d是一个date()对象变量。为了代码的简洁，html结构中给每一个元素都设置了一个ID。虽然不建议这样做，但这是将时针、分针和秒针与SVG元素匹配的最有效的方法。

r函数关注两个参数：元素的改变和旋转的角度。注意，我们讨论的是SVG元素的旋转，而不是CSS旋转，不用加各个厂商的前缀。

对应于sec的旋转角度，r函数通过ID和当前时间的6倍来计算。例如，如果当前时间的秒数为0，那么角度为0度，即不旋转。如果当前时间的秒数为30秒，那么30 x 6 = 180°，即秒针将旋转180°。（两个50 50是为了确保它们以SVG为中心进行旋转）。sec的旋转角度道理相同。hour则有一点不同：它使用的是当前的小时数除以12的余数乘以30，然后加上当前的分钟数除以2的值来旋转时针。例如，如果现在饿时间是12点过15分，那么计算后的值为：

r(hour, 30 * 0 + (15 / 2))
> 7.5                               
                            

如果时间是下午3点45分（在javascript中使用的是24小时时间制，所以小时数需要15 % 12。）计算结果是：

r(hour, 30 * 3 + (45 / 2))
> 112.5                                 
                           

以上的代码非常简洁,6行js代码就让时针动了起来，希望你能喜欢这个特效。

查看演示 下载地址