html5时间控件特效,html5 svg简单的模拟时钟特效

这是一款代码非常简洁的html5 svg模拟时钟特效插件。该插件通过简单的SVG图形来模拟时钟轮廓，然后使用JS代码让时钟动起来。你想查看jQuery版本的数字电子时钟的制作方法可以查看：使用JQUERY和CSS3制作逼真的数字时钟效果。html5版本带闹钟功能的数字电子时钟可以查看：html5超逼真带定时功能的电子数字时钟。

HTML结构

html结构中使用SVG path来模拟时钟的轮廓。

CSS样式

插件中的CSS样式只是简单的渲染时钟的轮廓，给时针、分针和秒针添加不同的颜色。

html {

background: #0e2e3a;

}

svg {

position: absolute;

top: 10%;

width: 95%;

height: 80%;

}

path {

stroke: #09151b;

stroke-linecap:round;

stroke-width: 42;

fill:none;

}

#sec {

stroke: #6f7f24;

stroke-width: 20;

}

#min {

stroke: #3d601b;

stroke-width: 38;

}

#hour {

stroke: #13441e;

stroke-width: 38;

}

JAVASCRIPT

是时钟动起来的js代码简单的使用js定时器来制作。

setInterval(function() {

function r(el, deg) {

el.setAttribute('transform', 'rotate('+ deg +' 500 500)')

}

var d = new Date()

r(sec, 6*d.getSeconds())

r(min, 6*d.getMinutes())

r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)

}, 1000)