这里是圆周运动呀 并不是网上很多的角度旋转
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
position: absolute;
left: 0;
top: 0;
}
.box2 {
width: 10px;
height: 10px;
border-radius: 50%;
background: purple;
position: absolute;
left: 0;
top: 0;
}
.box3 {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
position: absolute;
left: 0;
top: 0;
}
#lei {
position: absolute;
left: 400px;
top: 0px;
border-radius: 50%;
background-color: seagreen;
border: 1px solid black;
width: 400px;
height: 400px;
}
span {
position: absolute;
font-weight: 700;
}
</style>
</head>
<body>
<div id="lei">
<span>6</span>
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
<span>12</span>
<span>11</span>
<span>10</span>
<span>9</span>
<span>8</span>
<span>7</span>
</div>
<script>
var oSpan = document.querySelectorAll('span');
getClock();
var reg = 0;
var timeSecond = '';
var date = new Date;
console.log(date);
var h = gettimes(date.getHours()) + 1;
var m = date.getMinutes() + 1;
var s = date.getSeconds();
console.log(h, m, s);
hreg = h * 30;
mreg = m * 6;
sreg = s * 6;
//设置颜色变量
var box3 = 'box3';
var box2 = 'box2';
var box1 = 'box1';
// console.log(hreg, mreg, sreg);
//秒针函数
clock(200, 6, 1000, sreg - 90, box3);
//计算时针秒针差值
var dv = 60 - parseInt(s);
var dv1 = 60 - parseInt(m);
//在初始显示分针
var div888 = document.createElement("div");
div888.className = "box2";
var ta = Math.sin(Math.PI / 180 * (mreg - 90 - 6)) * 200;
var la = Math.cos(Math.PI / 180 * (mreg - 90 - 6)) * 200;
div888.style.left = la + 600 + 'px';
div888.style.top = ta + 200 + "px";
document.body.appendChild(div888);
//在初始显示时针
var div999 = document.createElement("div");
div999.className = "box1";
var ta = Math.sin(Math.PI / 180 * (hreg - 90 - 30)) * 200;
var la = Math.cos(Math.PI / 180 * (hreg - 90 - 30)) * 200;
div999.style.left = la + 600 + 'px';
div999.style.top = ta + 200 + "px";
document.body.appendChild(div999);
//延时调用分针使得在0点处同步
setTimeout(function () {
console.log(1);
div888.remove();
clock(200, 6, 1000 * 60, mreg - 90, box2);
}, dv * 1000)
//延时调用时针使得在0点处同步
setTimeout(function () {
clock(200, 30, 1000 * 60 * 60, hreg - 90, box1);
}, dv1 * 60 * 1000)
function clock(r, speed, sec, reg, color) {
var ces = sec;
var ger = reg;
var oDivss = document.createElement('div');
oDivss.className = color;
//获取div坐标
var t = Math.sin(Math.PI / 180 * ger) * r;
var l = Math.cos(Math.PI / 180 * ger) * r;
oDivss.style.left = l + 600 + 'px';
oDivss.style.top = t + 200 + "px";
document.body.appendChild(oDivss);
// return 0;
//删除上一秒的div
setTimeout(() => {
oDivss.remove();
}, ces);
timeSecond = setInterval(() => {
reg += speed;
var oDivs = document.createElement('div');
oDivs.className = color;
//获取div坐标
var t = Math.sin(Math.PI / 180 * reg) * r;
var l = Math.cos(Math.PI / 180 * reg) * r;
oDivs.style.left = l + 600 + 'px';
oDivs.style.top = t + 200 + "px";
document.body.appendChild(oDivs);
// return 0;
//删除上一秒的div
setTimeout(() => {
oDivs.remove();
}, sec);
}, sec);
}
function gettimes(times) {
if (times > 12) {
return times - 12;
} else {
return times;
}
}
function getClock() {
for (var i = 0; i < oSpan.length; i++) {
oSpan[i].style.positon = 'absolute';
oSpan[i].style.left = Math.cos(Math.PI / 180 * (90 - 30 * [i])) * 205 + 200 - 5 + 'px';
oSpan[i].style.top = Math.sin(Math.PI / 180 * (90 - 30 * [i])) * 205 + 200 - 5 + 'px';
}
}
</script>
</body>
</html>```