本次简易时钟，主要用到定位 position，css3中的 transform-origin ，还有旋转 rotate
time.png
全代码打包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钟表练习</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.outer{
width:200px;
height: 200px;
margin: 100px auto;
background-color: #548abb;
border-radius: 50%;
position: relative;
}
ul{
width:200px;
height: 200px;
position: relative;
}
ul li{
width: 2px;
height: 6px;
background-color: #000000;
transform-origin: 2px 100px;
position: absolute;
left: 98px;
top: 0;
}
ul li:nth-child(5n+1){
height: 10px;
width: 2px;
background-color: #cb5381;
}
.cir{
width: 10px;
height: 10px;
background-color: #cb5381;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
}
.hour{
width: 6px;
height: 70px;
border-radius: 5px;
background-color: #ff9900;
transform-origin: 50% 100%;
position: absolute;
left: 98px;
top: 30px;
}
.minu{
width: 4px;
height: 80px;
border-radius: 5px;
background-color: #5bff72;
transform-origin: 50% 100%;
position: absolute;
left: 99px;
top: 20px;
}
.sec{
width: 2px;
height: 90px;
border-radius: 5px;
background-color: #ff3315;
transform-origin: 50% 100%;
position: absolute;
left: 98px;
top: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="outer">
<ul>
<li></li>
<!-- 60个li-->
</ul>
<div class="hour"></div>
<div class="minu"></div>
<div class="sec"></div>
<div class="cir"></div>
</div>
</div>
<script>
var olis = document.querySelectorAll("ul li");//querySelectorAll 结果为数组
var oHour = document.querySelector(".hour");
var oMinu = document.querySelector(".minu");
var oSec = document.querySelector(".sec");
olis.forEach(function (item,index,arr) {
//遍历设置li的角度
item.style.transform = "rotate("+ index * 6+"deg)";
})
move();
function move(){
var now = new Date();
var sec = now.getSeconds();
var minu = now.getMinutes();
minu = minu + sec/60;
var hour = now.getHours();
hour = hour + minu/60;
oSec.style.transform = "rotate("+ sec * 6 +"deg)";
oMinu.style.transform = "rotate("+ minu * 6 +"deg)";
oHour.style.transform = "rotate("+ hour * 30 +"deg)";
}
setInterval(move,1000);
</script>
</body>
</html>
