<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 200px;
height: 200px;
position: relative;
border: 4px solid blueviolet;
border-radius: 50%;
}
.h {
width: 10px;
height: 80px;
position: absolute;
background: black;
left: 95px;
top: 40px;
/* c3新属性,旋转中心 x y */
transform-origin: 50% 60px;
/* x,y以当前div的左上起点为0点 */
}
.m {
width: 8px;
height: 100px;
position: absolute;
background: yellowgreen;
left: 96px;
top: 20px;
transform-origin: 50% 80px;
}
.s {
width: 4px;
height: 100px;
position: absolute;
background: red;
left: 98px;
top: 20px;
transform-origin: 50% 80px;
}
div[class^="a"] {
position: absolute;
width: 20px;
height: 20px;
text-align: center;
top: 0;
left: 90px;
transform-origin: 50% 100px;
}
.a1 {transform: rotate(30deg);}
.a2 {transform: rotate(60deg);}
.a3 { transform: rotate(90deg);}
.a4 {transform: rotate(120deg);}
.a5 {transform: rotate(150deg);}
.a6 { transform: rotate(180deg); }
.a7 {transform: rotate(210deg);}
.a8 { transform: rotate(240deg);}
.a9 {transform: rotate(270deg);}
.a10 {transform: rotate(300deg);}
.a11 {transform: rotate(330deg); }
.a12 {transform: rotate(360deg);}
</style>
</head>
<body>
<div class="wrapper">
<div class="h"></div>
<div class="m"></div>
<div class="s"></div>
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
<div class="a6">6</div>
<div class="a7">7</div>
<div class="a8">8</div>
<div class="a9">9</div>
<div class="a10">10</div>
<div class="a11">11</div>
<div class="a12">12</div>
</div>
<script>
var h = document.querySelector('.h');
var m = document.querySelector('.m');
var s = document.querySelector('.s');
function task() {
// 获取到当前的时间
var now = new Date();
var ss = now.getSeconds();
var sss = ss * 6;
var ms = now.getMinutes();
var mss = (ms*60 + ss)/3600*360;
var hs = now.getHours();
var hss = ((hs*60 + ms)*60 + ss)/(3600*12)*360;
s.style.transform = `rotate(${sss}deg)`;
m.style.transform = `rotate(${mss}deg)`;
h.style.transform = `rotate(${hss}deg)`;
}
// 起步先调用一次,能够过滤打开页面的一秒停顿,更流畅
task();
setInterval(task, 1000);
</script>
</body>
</html>