效果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>clock</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript">
function isInt(n) {
return parseInt(n) === n;
}
function rotate(x, y, angle) {
var A, R, rad;
rad = (angle == 0 ? 270 : angle) * Math.PI / 180;
A = Math.atan2(y, x) + rad;
R = Math.sqrt(x * x + y * y);
return {
x: Math.cos(A) * R,
y: Math.sin(A) * R
};
}
function rotateElement(el, deg) {
el.style.transform = `rotate(${
deg}deg)`;
}
</script>
</head>
<body>
<div class="clock">
<ul class="mark">
<script>
{
let i = 0;
let html = '';
while (i < 60) {
let n = i / 5 % 12;
n = n === 0 ? 12 : n;
let bold = isInt(n);
html +=
`<li class="${
bold ? ' bold': ''}" style="transform: translateY(250px) rotate(${
i * 6}deg);"></li>`;
i++;
}
document.write(html);
}
</script>
</ul>
<script>
{
let angle = 30,
x = 110,
y = -190,
i = 1,
html = '';
html += `<div class="numbers" style="transform: translate(${
x}px, ${
y}px);">${
i}</div>`;
while (i++ < 12) {
let pos = rotate(x, y, angle);
x = pos.x;
y = pos.y;
html += `<div class="numbers" style="transform: translate(${
x}px, ${
y}px);">${
i}</div>`;
}
document.write(html);
}
</script>
<div class="time">
<div id="date"></div>
<div id="now"></div>
<div id="day"></div>
</div>
<div class="hour-hand" id="h"></div>
<div class="minute-hand" id="m"></div>
<div class="second-hand" id="s"></div>
<div class="center"></div>
</div>
<script>
{
let f = (e, i) => (i != 0 && e < 10 ? '0' + e : e);
setInterval(() => {
let t = new Date();
rotateElement(h, t.getHours() * 30 + t.getMinutes() / 60 * 30);
rotateElement(m, t.getMinutes() * 6 + t.getSeconds() / 60 * 6);
rotateElement(s, t.getSeconds() * 6 + t.getMilliseconds() / 1000 * 6);
date.innerHTML = [t.getFullYear(), t.getMonth() + 1, t.getDate()].map(f).join('-');
day.innerHTML = '星期' + '日一二三四五六' [t.getDay()];
now.innerHTML = [t.getHours(), t.getMinutes(), t.getSeconds()].map(f).join(':');
}, 1000 / 60);
}
</script>
</body>
</html>
style.css
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
ul,
ul>li {
list-style-type: none;
}
body {
background-color: #0c020b;
}
.clock {
width: 500px;
height: 500px;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.clock .mark {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.clock .mark li {
position: absolute;
width: 6px;
height: 2px;
background: #fff;
transform-origin: 250px;
box-shadow: 0 0 10px #ffeab0;
}
.clock .mark li.bold {
width: 8px;
height: 4px;
}
.clock .numbers {
position: absolute;
left: 238px;
top: 238px;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
width: 24px;
height: 24px;
text-align: center;
color: #fff;
text-shadow: 0 0 10px #ffeab0;
}
.clock .center {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 24px;
height: 24px;
border-radius: 20px;
background: #ff1138;
}
.clock .hour-hand,
.clock .minute-hand,
.clock .second-hand {
box-shadow: 2px 2px 5px #ffeab0;
}
.clock .hour-hand {
position: absolute;
left: 247px;
top: 150px;
width: 6px;
height: 140px;
background: #fff;
transform-origin: 3px 100px;
}
.clock .minute-hand {
position: absolute;
left: 248px;
top: 70px;
width: 4px;
height: 220px;
background: #fff;
transform-origin: 2px 180px;
}
.clock .second-hand {
position: absolute;
left: 249px;
top: 40px;
width: 2px;
height: 280px;
background: #fff;
transform-origin: 1px 210px;
}
.clock .time {
padding: 10px;
position: absolute;
left: 260px;
top: 330px;
font-size: 12px;
font-weight: bold;
background: #110022;
color: #ff1138;
}