html的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>优课达</title>
<link rel="stylesheet" href="./index.css" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
</head>
<body>
<div id="warp">
<div id="clock">
<div id="number">
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
</div>
<div id="houre" class="pointer"></div>
<div id="minute" class="pointer"></div>
<div id="second" class="pointer"></div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
css代码如下
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
background: #9c9;
}
#warp {
width: 230px;
height: 230px;
margin: 50px auto;
}
#clock {
width: 200px;
height: 200px;
border-radius: 115px;
border: 15px solid #f96;
background: white;
position: relative;
}
#number div {
width: 190px;
height: 20px;
position: absolute;
left: 10px;
top: 90px;
}
#number span {
display: block;
width: 20px;
height: 20px;
}
.pointer {
position: absolute;
bottom: 90px;
transform-origin: 50% 90%;
}
#houre {
width: 5px;
height: 60px;
left: 98px;
background: black;
}
#minute {
width: 3px;
height: 70px;
left: 99px;
background: gray;
}
#second {
width: 1px;
height: 80px;
left: 100px;
background: red;
}
JS的代码如下
const numberDivs = document.querySelectorAll('#number div');
const numberSpans = document.querySelectorAll('#number span');
// 布置钟盘
for (let i = 0; i < numberDivs.length; i++) {
numberDivs[i].style.transform = `rotate(${
i * 30}deg)`;
}
// 纠正文字旋转偏移
for (let j = 0; j < numberSpans.length; j++) {
numberSpans[j].style.transform = `rotate(${
j * -30}deg)`;
}
// 渲染时钟
function render() {
const oHoure = document.querySelector('#houre');
const oMinute = document.querySelector('#minute');
const oSecond = document.querySelector('#second');
const nowTime = new Date();
const nowHoure = nowTime.getHours();
const nowMinute = nowTime.getMinutes();
const nowSecond = nowTime.getSeconds();
// 计算旋转度数
const hourDeg =
nowHoure * 30 +
nowMinute * (360 / 12 / 60) +
nowSecond * (360 / 12 / 60 / 60);
const minuteDeg = nowMinute * (360 / 60) + nowSecond * (360 / 60 / 60);
const secondDeg = nowSecond * (360 / 60);
oHoure.style.transform = `rotate(${
hourDeg}deg)`;
oMinute.style.transform = `rotate(${
minuteDeg}deg)`;
oSecond.style.transform = `rotate(${
secondDeg}deg)`;
}
render();
// 每隔1s进行一次渲染
setInterval(render, 1000);