当前位置主页 > 资料库 > 前端教程 > 使用6行javascript代码制作一个SVG模拟时钟

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

2015-01-04

查看演示 下载地址

本教程是一个关于使用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代码就让时针动了起来,希望你能喜欢这个特效。

查看演示 下载地址

Previous:
上一篇:浅谈HTML5表单验证技术
Next:
下一篇:HTML5 SVG简介
返回顶部