abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style> * { margin: 0; padd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: "微软雅黑";
overflow-y: hidden;
}
ol,
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#wrap {
position: relative;
width: 500px;
height: 500px;
top: 50px;
left: 50%;
margin-left: -225px;
transition: 0.3s;
perspective: 8000px;
}
#core,
#hover,
#minute,
#second {
position: absolute;
border-radius: 50%;
border: solid 3px #000;
box-sizing: border-box;
transition: 0.3s;
}
#hov,
#min,
#sec {
position: absolute;
border-radius: 50%;
border: solid 1px #7f7f7f;
box-sizing: border-box;
transition: 0.3s;
}
#core {
width: 25%;
height: 25%;
top: 37.5%;
left: 37.6%;
}
#hover {
width: 50%;
height: 50%;
top: 25%;
left: 25%;
}
#hov {
width: 37.5%;
height: 37.5%;
top: 31.25%;
left: 31.25%;
}
#minute {
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
}
#min {
width: 62.5%;
height: 62.5%;
top: 18.75%;
left: 18.75%;
}
#second {
width: 100%;
height: 100%;
}
#sec {
width: 87.5%;
height: 87.5%;
top: 6.25%;
left: 6.25%;
}
#wrap > div div {
width: 10%;
height: 100%;
position: absolute;
top: 0;
left: 45%;
}
#wrap > div div span {
display: block;
text-align: center;
font-size: 20px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
transform: rotateZ(-90deg);
}
</style>
</head>
<body>
<div id="wrap">
<div id="core"></div>
<div id="hover"></div>
<div id="hov"></div>
<div id="minute"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="second"></div>
</div>
<script>
(function() {
let oWrap = document.getElementById("wrap"),
oCore = document.getElementById("core"),
oHover = document.getElementById("hover"),
oHov = document.getElementById("hov"),
oMinute = document.getElementById("minute"),
oMin = document.getElementById("min"),
oSecond = document.getElementById("second"),
oSec = document.getElementById("sec"),
deg = 0;
oHov.style.transform = `rotateZ(-30deg)`;
oHover.style.transform = `rotateZ(-306deg)`;
oMin.style.transform = `rotateZ(-330deg)`;
oMinute.style.transform = `rotateZ(-306deg)`;
oSec.style.transform = `rotateZ(-330deg)`;
oSecond.style.transform = `rotateZ(-306deg)`;
for (let k = 0; k < 3; k++) {
deg += 360 / 3;
oHov.innerHTML += `<div></div>`;
let aInside = document.querySelectorAll("#hov div");
aInside[k].style.transform = `rotateZ(${deg}deg)`;
aInside[k].innerHTML += `<span></span>`;
let aInsideSpan = document.querySelectorAll("#hov div span");
aInsideSpan[k].innerHTML = `${k}`;
}
deg = 0;
for (let i = 0; i < 6; i++) {
deg += 360 / 6;
oMin.innerHTML += `<div></div>`;
oSec.innerHTML += `<div></div>`;
let aCenterMin = document.querySelectorAll("#min div"),
aCenterSec = document.querySelectorAll("#sec div");
aCenterMin[i].style.transform = `rotateZ(${deg}deg)`;
aCenterSec[i].style.transform = `rotateZ(${deg}deg)`;
aCenterMin[i].innerHTML += `<span></span>`;
aCenterSec[i].innerHTML += `<span></span>`;
let aCenterMinSpan = document.querySelectorAll("#min div span"),
aCenterSecSpan = document.querySelectorAll("#sec div span");
aCenterMinSpan[i].innerHTML = `${i}`;
aCenterSecSpan[i].innerHTML = `${i}`;
}
deg = 0;
for (let j = 0; j <= 9; j++) {
deg += 360 / 10;
oHover.innerHTML += `<div></div>`;
oMinute.innerHTML += `<div></div>`;
oSecond.innerHTML += `<div></div>`;
let aOutsideHover = document.querySelectorAll("#hover div"),
aOutsideMinute = document.querySelectorAll("#minute div"),
aOutsideSecond = document.querySelectorAll("#second div");
aOutsideHover[j].style.transform = `rotateZ(${deg}deg)`;
aOutsideMinute[j].style.transform = `rotateZ(${deg}deg)`;
aOutsideSecond[j].style.transform = `rotateZ(${deg}deg)`;
aOutsideHover[j].innerHTML += `<span></span>`;
aOutsideMinute[j].innerHTML += `<span></span>`;
aOutsideSecond[j].innerHTML += `<span></span>`;
let aOutsideHoverSpan = document.querySelectorAll("#hover div span"),
aOutsideMinuteSpan = document.querySelectorAll("#minute div span"),
aOutsideSecondSpan = document.querySelectorAll("#second div span");
aOutsideHoverSpan[j].innerHTML = `${j}`;
aOutsideMinuteSpan[j].innerHTML = `${j}`;
aOutsideSecondSpan[j].innerHTML = `${j}`;
}
setInterval(change, 1000);
function change() {
let timer = new Date(),
hh = timer.getHours(),
mm = timer.getMinutes(),
ss = timer.getSeconds(),
arr = [addZero(hh), addZero(mm), addZero(ss)];
let num = arr.join("");
num = num.split("");
oHov.style.transform = `rotateZ(-${30 + parseInt(num[0]) * 120}deg)`;
oHover.style.transform = `rotateZ(-${306 +
parseInt(num[1]) * 36}deg)`;
oMin.style.transform = `rotateZ(-${330 + parseInt(num[2]) * 60}deg)`;
oMinute.style.transform = `rotateZ(-${306 +
parseInt(num[3]) * 36}deg)`;
oSec.style.transform = `rotateZ(-${330 + parseInt(num[4]) * 60}deg)`;
oSecond.style.transform = `rotateZ(-${306 +
parseInt(num[5]) * 36}deg)`;
}
function addZero(n) {
return n < 10 ? "0" + n : n + "";
}
})();
</script>
</body>
</html>
时间可以用，特效显示，也可以做时间版运动框架，还能做世界时间，可以做倒计时
Correcting teacher：西门大官人Correction time：2019-03-03 09:38:23
Teacher's summary：代码最好添加上必要的注释，方便别人阅读。该案例的核心是定时器的使用，转盘在旋转的时候，最外层转一圈后，里面的一层是不是要转一下？可以在change中触发这个事件，建议考虑一下