js钟表效果代码实例
分类：实例代码
分享一段代码实例，它利用js操作dom实现了圆形钟表效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload = function() {
var clock = document.createElement('div');
clock.style.width = '600px';
clock.style.height = '600px';
clock.style.borderRadius = '50%';
clock.style.border = '4px solid rgba(0, 0, 0, 0.6)';
clock.style.position = 'relative';
clock.style.margin = '0 auto';
var body = document.getElementsByTagName('body')[0];
body.appendChild(clock);
for (var i = 1; i < 31; i++) {
var scale = document.createElement('div');
scale.style.width = '4px';
scale.style.height = '580px';
scale.style.borderTop = '10px solid rgba(0, 0, 0, 0.6)';
scale.style.borderBottom = '10px solid rgba(0, 0, 0, 0.6)';
scale.style.position = 'absolute';
scale.style.left = '298px';
scale.style.transform = 'rotate(' + i * 6 + 'deg)';
clock.appendChild(scale);
if (i % 5 == 0) {
scale.style.borderTop = '18px solid rgba(0, 0, 0, 0.6)';
scale.style.borderBottom = '18px solid rgba(0, 0, 0, 0.6)';
scale.style.height = '564px';
scale.style.width = '8px';
scale.style.left = '296px';
var numberBox = document.createElement('div');
numberBox.style.width = '88%';
numberBox.style.height = '8px';
numberBox.style.position = 'absolute';
numberBox.style.transform = 'rotate(' + (i * 6 + 90) + 'deg)';
numberBox.style.left = '6%';
numberBox.style.top = '296px';
clock.appendChild(numberBox);
for (var j = 1; j < 3; j++) {
var number = document.createElement('i');
number.style.display = 'block';
number.style.fontSize = '30px';
number.style.textShadow = '2px 2px lightGray';
number.style.width = '30px';
number.style.height = '30px';
number.style.marginTop = '-21px';
number.style.padding = '10px';
number.style.textAlign = 'center';
number.style.lineHeight = '30px';
number.style.transform = 'rotate(-' + (i * 6 + 90) + 'deg)';
if (j == 2) {
number.style.float = 'right';
number.innerHTML = (i / 5 + 6).toString();
} else {
number.style.float = 'left';
number.innerHTML = (i / 5).toString();
}
numberBox.appendChild(number);
}
}
}
var hour = document.createElement('div');
hour.style.width = '12px';
hour.style.height = '36%';
hour.style.background = 'rgba(0, 0, 0, 0.6)';
hour.style.position = 'absolute';
hour.style.left = '294px';
hour.style.top = '14%';
hour.style.zIndex = '1800';
hour.style.borderRadius = '4px';
clock.appendChild(hour);
var minute = document.createElement('div');
minute.style.width = '8px';
minute.style.height = '44%';
minute.style.background = 'orange';
minute.style.position = 'absolute';
minute.style.left = '296px';
minute.style.top = '6%';
minute.style.zIndex = '1900';
minute.style.borderRadius = '4px';
clock.appendChild(minute);
var second = document.createElement('div');
second.style.width = '4px';
second.style.height = '56%';
second.style.background = 'red';
second.style.position = 'absolute';
second.style.left = '298px';
second.style.zIndex = '2000';
second.style.borderRadius = '2px';
clock.appendChild(second);
var dot = document.createElement('div');
dot.style.width = '16px';
dot.style.height = '16px';
dot.style.borderRadius = '50%';
dot.style.background = 'red';
dot.style.position = 'absolute';
dot.style.left = '292px';
dot.style.top = '292px';
dot.style.zIndex = '3000';
clock.appendChild(dot);
var dotMask = document.createElement('div');
dotMask.style.width = '28px';
dotMask.style.height = '28px';
dotMask.style.borderRadius = '50%';
dotMask.style.background = 'lightGray';
dotMask.style.opacity = '0.6';
dotMask.style.position = 'absolute';
dotMask.style.left = '286px';
dotMask.style.top = '286px';
dotMask.style.zIndex = '3001';
clock.appendChild(dotMask);
hour.style.transformOrigin = 'bottom';
minute.style.transformOrigin = 'bottom';
second.style.transformOrigin = '2px 300px';
function clockStart() {
var currentDate = new Date();
var currentHour = currentDate.getHours();
var currentMinute = currentDate.getMinutes();
var currentSecond = currentDate.getSeconds();
second.style.transform = 'rotate(' + currentSecond * 6 + 'deg)';
var minDeg = 6 * currentMinute / 360 * 30;
hour.style.transform = "rotate(" + (currentHour * 30 + minDeg) + "deg)";
var secDeg = 6 * currentSecond / 360 * 6;
minute.style.transform = "rotate(" + (currentMinute * 6 + secDeg) + "deg)";
}
clockStart();
setInterval(clockStart, 1000);
}
</script>
</head>
<body>
</body>
</html>
js钟表效果代码实例，这样的场景在实际项目中还是用的比较多的，关于js钟表效果代码实例就介绍到这了。
js钟表效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。