<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
</head>
<style>
html,
body {
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
#wrap {
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#wrap ul li {
width: 2px;
height: 6px;
position: absolute;
background-color: #000;
left: 50%;
top: 0;
margin-left: -1px;
transform-origin: center 100px;
}
#wrap ul li:nth-child(5n+1) {
height: 10px;
}
.hour {
position: absolute;
left: 97px;
width: 6px;
top: 70px;
height: 30px;
background: blue;
transform-origin: center bottom;
}
.min {
position: absolute;
left: 98px;
top: 50px;
width: 4px;
height: 50px;
background: brown;
transform-origin: center bottom;
}
.sec {
position: absolute;
left: 99px;
top: 30px;
width: 2px;
height: 70px;
background: rgb(248, 3, 3);
transform-origin: center bottom;
}
.icon {
position: absolute;
left: 90px;
top: 90px;
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
}
</style>
<body>
<div id="wrap">
<ul></ul>
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="icon"></div>
</div>
<script>
window.onload = function() {
//获取时间针
var hourNode = document.querySelector("#wrap>.hour");
var minNode = document.querySelector("#wrap>.min");
var secNode = document.querySelector("#wrap>.sec");
//获取ul容器
var ulNode = document.querySelector("#wrap>ul");
//创建一个li的容器
var liHtml = "";
//创建一个style标签
var styleNode = document.createElement("style");
//创建一个style容器
var liStyle = "";
//创建li
for (var i = 0; i < 60; i++) {
//追加到li的容器里
liHtml += "<li></li>";
//追加样式
liStyle += "#wrap ul li:nth-child(" + (i + 1) + ") {transform: rotate(" + (i * 6) + "deg)}";
styleNode.innerHTML = liStyle;
document.head.appendChild(styleNode);
//liHtml追加到ul里
ulNode.innerHTML = liHtml;
};
//先执行
move();
//定时器
setInterval(move, 1000);
function move() {
//获取时间戳
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s / 60;
var h = date.getHours() + m / 60;
//计算每秒各自旋转的角度
hourNode.style.transform = "rotate(" + (30 * h) + "deg)";
minNode.style.transform = "rotate(" + (6 * m) + "deg)";
secNode.style.transform = "rotate(" + (6 * s) + "deg)";
};
}
</script></body>
</html>
