先看实现效果
代码实现
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>时钟</title>
</head>
<body>
<!-- 大盒子 存放整个时钟 -->
<div class="clock">
<!-- 外层时钟 -->
<div class="outer-clock-face">
<!-- 钟表数简陋显示,通过旋转实现6根分隔线 -->
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<!-- 内层时钟 -->
<div class="inner-clock-face">
<!-- 时针 -->
<div class="hand hour-hand"></div>
<!-- 分针 -->
<div class="hand min-hand"></div>
<!-- 秒针 -->
<div class="hand second-hand"></div>
</div>
</div>
</div>
<script src="./index.js">
</script>
</body>
</html>
CSS
html {
background: pink;
font-size: 10px;
}
body {
height: 100vh;
margin: 0;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 7px solid #ffebdb;
border-radius: 50%;
box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.1),
inset 4px 4px 10px rgba(168, 145, 128, 0.6),
inset -4px -4px 10px rgba(201, 175, 155, 0.2),
4px 4px 10px rgba(168, 145, 128, 0.6);
background-image: url("https://img.es123.com/uploadimg/image/20231027/20231027141045_71380.png");
background-size: 108%;
padding: 2rem;
}
.outer-clock-face {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.outer-clock-face::before,
.outer-clock-face::after {
content: '';
width: 10px;
height: 100%;
background: #596230;
position: absolute;
border-radius: 8px;
}
.outer-clock-face::after {
transform: rotate(90deg);
}
.marking {
width: 3px;
height: 100%;
background: #596230;
position: absolute;
}
/*通过旋转实现背景图上六根分隔线将时钟分隔的效果*/
.marking-one {
transform: rotateZ(30deg);
}
.marking-two {
transform: rotateZ(60deg);
}
.marking-three {
transform: rotateZ(120deg);
}
.marking-four {
transform: rotateZ(150deg);
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: #fffebd;
z-index: 2;
border-radius: 50%;
/*导入外部图片，也就是时钟的背景图*/
background-image: url("https://img.es123.com/uploadimg/image/20231027/20231027141045_71380.png");
background-size: 108%;
}
.inner-clock-face::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #4d4b63;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hand {
width: 50%;
height: 6px;
background: red;
border-radius: 6px;
position: absolute;
top: 50%;
right: 50%;
margin-top: -3px;
/*transform-origin修改旋转中心*/
transform-origin: 100% 50%;
transform: rotate(90deg);
}
.hour-hand {
width: 30%;
}
.min-hand {
width: 40%;
height: 3px;
}
.second-hand {
background: #b3b3b3;
width: 45%;
height: 2px;
}
JS
// 分别获取三根指针，时针、分钟、秒针
const hourHand = document.querySelector('.hour-hand')
const minHand = document.querySelector('.min-hand')
const secondHand = document.querySelector('.second-hand')
// 设置实时时间
function setTime() {
// 获取当前时间
const now = new Date()
// 获取当前的秒数
const seconds = now.getSeconds();
// 设置秒针的实时角度
// 加90是将秒针初始位置就设置在0秒
const secondsDegrees = seconds * 6 + 90
secondHand.style.transform = `rotate(${secondsDegrees}deg)`
// 设置分针的实时角度
// 加90也是为了让分钟初始位置在0分处
const mins = now.getMinutes();
const minsDegrees = mins * 6 + 90
minHand.style.transform = `rotate(${minsDegrees}deg)`
// 设置时针的实时角度
const hours = now.getHours();
const hoursDegrees = hours * 30 + 90 + (mins / 60) * 30
hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}
setTime()
// 每隔一秒调用一次setTime函数
setInterval(setTime, 1000)
最终效果图
留言
如果以上内容对你有些许帮助，还请劳烦给博主送一个小心心♥(ˆ◡ˆԅ)
本人Gitee仓库链接(也要♥(ˆ◡ˆԅ)):codeSpace: 记录coding中的点点滴滴 (gitee.com)
