大家好,又见面了,我是你们的朋友全栈君。
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);
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154096.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...