<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟完整版</title>
<style>
*{margin: 0;padding: 0}
#box{
width: 400px;
height: 400px;
background: #d4d1d1;
border-radius: 50%;
border: 1px solid #7c7a7a;
position: relative;
margin:50px auto;
}
#box>li{
list-style: none;
transform-origin:center top;
width: 3px;
background : #7c7a7a;
position :absolute;
}
#box .hourHand{
width: 4px;
height: 40px;
background: green;
position: absolute;
left: 50%;
bottom: 50%;
transform-origin:center bottom;
}
#box .minuteHand{
width: 4px;
height: 75px;
background: black;
position: absolute;
left: 50%;
bottom: 50%;
transform-origin:center bottom;
}
#box .secondHand{
width: 4px;
height: 95px;
background: red;
position: absolute;
left: 50%;
bottom: 50%;
transform-origin:center bottom;
}
#box .circle{
width: 10px;
height: 10px;
background: black;
border-radius: 5px;
position: absolute;
left: 49%;
top: 49%;
}
#box .b1{
position: absolute;
left: 41%;
bottom:20%;
}
</style>
</head>
<body>
<div id="box">
<div class="hourHand"></div>
<div class="minuteHand"></div>
<div class="secondHand"></div>
<div class="circle"></div>
<b class="b1"></b>
</div>
</body>
<script>
var oBox = document.getElementById("box");
var oHourHand = document.getElementsByClassName("hourHand");
var oMinuteHand = document.getElementsByClassName("minuteHand");
var oSecondHand = document.getElementsByClassName("secondHand");
var oB = document.getElementsByClassName("b1");
//degL表示时钟的长格旋转度数
var degL = 0;
//degS表示时钟的短格旋转度数
var degS = 0;
//时钟的半径
var r = 200;
//记录时钟的圆心位置
var X = 200;
var Y = 200;
//创建时钟上的刻度
for(var i = 0;i < 12;i++){
var oLi = document.createElement("li");
var oSpan = document.createElement("span");
var rotate = degL * (Math.PI / 180);
var X1 = Math.sin(rotate) * r;
var Y1 = Math.cos(rotate) * r;
oLi.style.height = "15px";
oLi.style.left = X + X1 + "px";
oLi.style.top = Y - Y1 + "px";
if (i == 0) {
oSpan.innerHTML = 12;
}else{
oSpan.innerHTML = i;
}
oSpan.style.position = "absolute";
oSpan.style.left = "-3px";
oSpan.style.top = "17px";
oSpan.style.transform = `rotate(${-degL}deg)`;
oLi.style.transform = `rotate(${degL}deg)`;
oBox.appendChild(oLi);
oLi.appendChild(oSpan);
for(var k = 0;k < 4;k++){
if (degS != degL) {
var oLi = document.createElement("li");
var rotate = degS * (Math.PI / 180);
var X2 = Math.sin(rotate) * r;
var Y2 = Math.cos(rotate) * r;
oLi.style.height = "10px";
oLi.style.left = X + X2 + "px";
oLi.style.top = Y - Y2 + "px";
oLi.style.transform = `rotate(${degS}deg)`;
oBox.appendChild(oLi);
}else{
--k;
}
degS+=6;
}
degL+=30;
}
//获取当前时间的年,月,日,时,分,秒
function getTime(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDate();
var hour = d.getHours();
var week = d.getDay();
var minute = d.getMinutes();
var second = d.getSeconds();
oSecondHand[0].style.transform = `rotate(${second*6}deg)`;
oMinuteHand[0].style.transform = `rotate(${minute*6}deg)`;
oHourHand[0].style.transform = `rotate(${hour*30 + minute / 2}deg)`;
oB[0].innerHTML = year+"-"+(month+1)+"-"+day;
}
setInterval(function(){
getTime();
},1000)
</script>
</html>
手工制作的gif图,仅供参考,具体看代码