前几天没事写的个模拟时钟，代码仅供小白参考，大神请自动绕过。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟时钟</title>
<style>
body {
margin: 0;
padding: 0;
} #blockDial {
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
position: relative;
background-color: coral;
} .heart {
width: 10px;
height: 10px;
background-color: black;
margin: 95px auto;
border-radius: 50%;
} .blockwise {
width: 2px;
height: 80px;
background-color: black;
position: absolute;
left: 99px;
top: 20px;
z-index: 10;
}
.secondHand{
width: 2px;
height: 50px;
background-color: black;
position: absolute;
left: 99px;
top: 50px;
z-index: 10;
}
.minuteHand{
width: 2px;
height: 65px;
background-color: black;
position: absolute;
left: 99px;
top: 35px;
z-index: 10;
}
#currentTime{
width: 120px;
height: 30px;
border: 1px solid black;
margin: 10px 40px;
text-align: center;
line-height: 30px;
}
.num{
font-size: 24px;
color: aqua;
position: absolute;
}
.num3{
top:42%;
left: 90%;
}
.num6{
top:86%;
left: 46%;
}
.num9{
top:42%;
left: 0;
}
.num12{
top:0;
left: 44%;
}
</style>
</head>
<body>
<div id="blockDial">
<div class="heart"></div>
<div class="blockwise"></div>
<div class="secondHand"></div>
<div class="minuteHand"></div>
<div class="num num3">3</div>
<div class="num num6">6</div>
<div class="num num9">9</div>
<div class="num num12">12</div>
</div>
<div id="currentTime"></div>
<script src="main.js"></script>
</body>
</html>
html
(function () {
var blockwise = document.querySelector("#blockDial .blockwise");
var secondHand = document.querySelector("#blockDial .secondHand");
var minuteHand = document.querySelector("#blockDial .minuteHand");
var currentTime = document.querySelector("#currentTime");
function formate(num) {
return num>=10? num:"0"+num;
}
setInterval(function () {
var time = new Date();
currentTime.innerHTML = formate(time.getHours()) + ":" +
formate(time.getMinutes()) + ":" + formate(time.getSeconds());
var angleSeconds = time.getSeconds() * 6;
rotateDiv(secondHand, angleSeconds);
var angleHours = time.getHours() * 30;
rotateDiv(blockwise, angleHours);
var angleMinute = time.getMinutes() * 6;
rotateDiv(minuteHand, angleMinute);
}, 1000);
function rotateDiv(target, angle) {
target.style.transform = "rotate(" + angle + "deg) ";
target.style.transformOrigin = "100% 100%";
}
document.body.addEventListener("click", function (event) {
console.log(event.pageX, event.pageY);
});
})();js
吐槽：这代码水准已经是我那时候的最高水平了，╮(╯▽╰)╭