想到很多年前,我还是个初出茅庐的前端,只会Table切图,HTML+CSS,去面试一家公司的前端,技术面试让我说说setInterval和setTimeout,当时我说
“没用过…”,结果当然game over
很多年过去了,我也算用过了。
时间不止,步履不停。
主要使用transform rotate,通过设置transform-origin来确定旋转的中心位置。
因为加了数字,所以看起来有点长,其实很简单。
预览地址:https://codepen.io/lucidity99/pen/ZEbYEgQ
HTML
<body>
<div class="clock">
<div class="numbers">
<span class="num1">1</span>
<span class="num2">2</span>
<span class="num3">3</span>
<span class="num4">4</span>
<span class="num5">5</span>
<span class="num6">6</span>
<span class="num7">7</span>
<span class="num8">8</span>
<span class="num9">9</span>
<span class="num10">10</span>
<span class="num11">11</span>
<span class="num12">12</span>
</div>
<div class="small-circle"></div>
<div class="middle"></div>
<div class="pointer pointer-hour" id="pHour"></div>
<div class="pointer pointer-minute" id="pMinute"></div>
<div class="pointer pointer-second" id="pSecond"></div>
</div>
</body>
JS
let pHour = document.getElementById("pHour");
let pMinute = document.getElementById("pMinute");
let pSecond = document.getElementById("pSecond");
setInterval(function() {
let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
let hourDeg = ((hour % 12) + minute / 60) * 30 - 180;
let minuteDeg = (minute + second / 60) * 6 - 180;
let secondDeg = second * 6 - 180;
pHour.style.transform = "rotate(" + hourDeg+ "deg)";
pMinute.style.transform = "rotate(" + minuteDeg+ "deg)";
pSecond.style.transform = "rotate(" + secondDeg+ "deg)";
}, 1000);
CSS
.clock {
position: relative;
width: 400px;
height: 400px;
background-image: linear-gradient(to right, #eef6fd, #c9daeb);
border-radius: 100%;
box-shadow: 30px 26px 50px -30px #abbccf;
}
.small-circle {
position: absolute;
top: 80px;
left: 80px;
width: 240px;
height: 240px;
border-radius: 100%;
background-image: linear-gradient(to right, #f0f7fe, #e5ecf6);
box-shadow: 0 0 40px #d0dcec;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
z-index: 10;
width: 10px;
height: 10px;
background-color: lavenderblush;
border-radius: 100%;
box-shadow: 0 0 5px #222d60;
}
.pointer {
position: absolute;
top: 50%;
left: 50%;
background: indigo;
opacity: .9;
transform-origin: center 20px;
}
.pointer-hour {
width: 6px;
height: 88px;
background-color: #222d60;
z-index: 9;
border-radius: 3px;
margin-left: -3px;
margin-top: -20px;
box-shadow: 2px 0 5px #6c759b;
}
.pointer-minute {
width: 6px;
height: 118px;
background-color: #c0cad9;
z-index: 8;
margin-left: -3px;
margin-top: -20px;
border-radius: 3px;
box-shadow: 2px 0 5px #c0cad9;
}
.pointer-second {
width: 4px;
height: 170px;
background-color: #ff3007;
z-index: 7;
margin-left: -2px;
margin-top: -20px;
border-radius: 2px;
box-shadow: 2px 0 5px #f9bddd;
}
.numbers span {
position: absolute;
top: 20px;
left: 50%;
margin-left: -25px;
display: block;
width: 50px;
height: 180px;
transform-origin: center bottom;
font-size: 32px;
color: #fff;
text-align: center;
font-family: Helvetica
}
.num1 {
transform: rotate(30deg)
}
.num2 {
transform: rotate(60deg)
}
.num3 {
transform: rotate(90deg)
}
.num4 {
transform: rotate(120deg)
}
.num5 {
transform: rotate(150deg)
}
.num6 {
transform: rotate(180deg)
}
.num7 {
transform: rotate(210deg)
}
.num8 {
transform: rotate(240deg)
}
.num9 {
transform: rotate(270deg)
}
.num10 {
transform: rotate(300deg)
}
.num11 {
transform: rotate(330deg)
}
.num12 {
transform: rotate(0deg)
}