用javaScript实现钟表功能

来源：互联网发布：网络教学的弊端英文编辑：程序博客网时间：2024/05/17 01:44

用JavaScript实现简单的钟表功能，效果如下：

注：本代码只在Chrome浏览器中运行过，没有在IE浏览器中做过检测，给读者带来的不便敬请谅解。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<script type="text/javascript">
var body_ = document.getElementsByTagName("body");
body_[0].style.background = 'black';
//创建表盘
var clockDiv = document.createElement("div");
clockDiv.style.width = '300px';
clockDiv.style.height = '300px';
clockDiv.style.background = 'white';
clockDiv.style.backgroundSize = '100% 100%';
clockDiv.style.margin = '100px auto';
clockDiv.style.position = 'relative';
clockDiv.style.borderRadius = '50%';
clockDiv.style.boxShadow = '0 0 150px #ccc';
body_[0].appendChild(clockDiv);
//刻度（kdSpan）
for(var i = 0; i < 30; i++) {
var kdSpan = document.createElement("div");
clockDiv.appendChild(kdSpan);
kdSpan.style.borderTop = '5px solid gray';
kdSpan.style.borderBottom = '5px solid gray';
kdSpan.style.width = '2px';
kdSpan.style.height = '290px';
kdSpan.style.display = 'inline-block';
kdSpan.style.position = 'absolute';
kdSpan.style.top = '0px';
kdSpan.style.left = '149px';
kdSpan.style.transform = 'rotateZ(' + i * 6 + 'deg)'
if(i % 15 == 0) { //大刻度
kdSpan.style.borderTop = '10px solid black';
kdSpan.style.borderBottom = '10px solid black';
kdSpan.style.height = '280px';
kdSpan.style.width = '4px';
kdSpan.style.left = '148px';
} else if(i % 5 == 0) { //小刻度
kdSpan.style.borderTop = '8px solid black';
kdSpan.style.borderBottom = '8px solid black';
kdSpan.style.height = '280px';
} else {

}
}
//创建数字

for(i = 1; i < 13; i++) {
var numberDiv = document.createElement("div");
numberDiv.style.height = '240px';
numberDiv.style.display = 'inline-block';
numberDiv.style.position = 'absolute';
numberDiv.style.left = '135px';
numberDiv.style.top = '30px';
numberDiv.style.transform = 'rotateZ(' + i * 30 + 'deg)'
clockDiv.appendChild(numberDiv);

var numItem = document.createElement("i");
numItem.innerHTML = i;
numItem.style.width = '30px';
numItem.style.fontSize = '1.2rem';
numItem.style.fontStyle = 'normal';
numItem.style.textAlign = 'center';
numItem.style.display = 'inline-block';
numItem.style.transform = 'rotateZ(' + i * 330 + 'deg)'
numberDiv.appendChild(numItem);
}
//时针
var hoursDiv = document.createElement("div");
hoursDiv.style.height = '80px';
hoursDiv.style.width = '7px';
hoursDiv.style.background = 'black';
hoursDiv.style.borderRadius = '3px';
hoursDiv.style.position = 'absolute';
hoursDiv.style.top = '80px';
hoursDiv.style.left = '146.5px';
hoursDiv.style.transformOrigin = '50% 70px';
hoursDiv.style.transform = 'rotate(50deg)';
clockDiv.appendChild(hoursDiv);
//分针
var minutesDiv = document.createElement("div");
minutesDiv.style.width = '5px';
minutesDiv.style.height = '100px';
minutesDiv.style.borderRadius = '2px';
minutesDiv.style.position = 'absolute';
minutesDiv.style.left = '149px';
minutesDiv.style.transformOrigin = '50% 90px';
minutesDiv.style.top = '60px';
minutesDiv.style.background = 'green';
clockDiv.appendChild(minutesDiv);
//秒针
var secondsDiv = document.createElement("div");
secondsDiv.style.width = '2px';
secondsDiv.style.height = '120px';
secondsDiv.style.position = 'absolute';
secondsDiv.style.left = '149px';
secondsDiv.style.transformOrigin = '50% 110px';
secondsDiv.style.top = '40px';
secondsDiv.style.background = 'red';
clockDiv.appendChild(secondsDiv);

function setTime(a, b, c) {
var nowTime = new Date();
var hours = nowTime.getHours();
var minutes = nowTime.getMinutes();
var seconds = nowTime.getSeconds();

var hoursDeg, minutesDeg;
hoursDeg = (360 / 12 * hours) + ((360 / 60 * 5) / 60 * minutes);
minutesDeg = 360 / 60 * minutes + (360 / 60) / 60 * seconds;
rotate(hoursDeg, hoursDiv);
rotate(minutesDeg, minutesDiv);
rotate(360 / 60 * seconds, secondsDiv);
}

setTime();

function rotate(deg, div) {
div.style.transform = 'rotate(' + deg + 'deg)';
}
setInterval('setTime()', 1000);
</script>
</body>

</html>

0 0