HTML5动态时钟代码
#clock { stroke: black; stroke-linecap:square; fill: #fcfcfc; width: 500px; height: 500px; }
#face { stroke-width: 2px; }
#ticks { stroke-width: 1px; }
#hour { stroke-width: 3px; stroke: #000; }
#minute { stroke-width: 2px; stroke: #333; }
#second { stroke-width: 1px; stroke: #f23; }
#numbers { font-family: sans-serif; font-size: 8px; font-weight: bold; text-anchor: middle; stroke: none; fill: black; }
12
3
6
9
setInterval(function () {
var now = new Date(), min = now.getMinutes(), hour = now.getHours(), sec = now.getSeconds(),
mangle = min * 6, hangle = (hour + min / 60) * 30, sangle = sec * 6,
mhand = document.getElementById('minute'), hhand = document.getElementById('hour'), shand = document.getElementById('second');
hhand.setAttribute('transform', 'rotate(' + hangle + ',50,50)');
mhand.setAttribute('transform', 'rotate(' + mangle + ',50,50)');
shand.setAttribute('transform', 'rotate(' + sangle + ',50,50)');
}, 1000);
更多推荐
html炫酷动态时钟代码,HTML5动态时钟代码
发布评论