效果如下：程序实际的效果是最新的时钟，我这里只是录屏了几秒钟。
clock.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
</head>
<style>
*{
padding: 0;
margin:0;
}
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main{
width: 200px;
height: 200px;
}
.clock{
width: 100%;
height: 100%;
background:linear-gradient(to right,#f1c40f,#e67e22,#ef4c3c);
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -2;
}
.clock::before{
content: "";
width: 90%;
height: 90%;
background-color: #2c3e50;
border-radius: 50%;
position: absolute;
z-index: -1;
}
.line{
width: 80%;
height: 80%;
/* background-color: #000000; */
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.line>div{
width: 5px;
height: 100%;
background-color: white;
position: absolute;
left:50%;
}
.line >div:nth-child(1){
transform:translate(-50%);
}
.line >div:nth-child(2){
transform:translate(-50%) rotate(30deg);
}
.line >div:nth-child(3){
transform:translate(-50%) rotate(60deg);
}
.line >div:nth-child(4){
transform:translate(-50%) rotate(90deg);
}
.line >div:nth-child(5){
transform:translate(-50%) rotate(120deg);
}
.line >div:nth-child(6){
transform:translate(-50%) rotate(150deg);
}
.line::before{
content: "";
width: 90%;
height:90%;
background-color: #2c3e50;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.line::after{
content: "";
width: 10px;
height: 10px;
background-color: #FFFFFF;
border-radius: 50%;
z-index:1;
}
.hour{
width: 6px;
height: 15%;
background-color: #FFF9EC;
position: absolute;
z-index: 1;
bottom: 50%;
transform-origin: bottom;
}
.min{
width: 3px;
height: 25%;
background-color: #FFF9EC;
position: absolute;
z-index: 1;
bottom: 50%;
transform-origin: bottom;
}
.sec{
width: 1px;
height: 35%;
background-color: #FFF9EC;
position: absolute;
z-index: 1;
bottom: 50%;
transform-origin: bottom;
transform: rotate(360deg);
}
</style>
<body>
<main>
<div class="clock">
<div class="line">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
</main>
</body>
<script>
let h=document.querySelector(".hour");
let m=document.querySelector(".min");
let s=document.querySelector(".sec");
//根据当下时间初始化时钟
current();
function current(){
//获取当下时间
let now=new Date();
let hour=now.getHours();
let min=now.getMinutes();
let sec=now.getSeconds();
//时分针一般不是定在整点数的，所以我们在设置时针的角度时除了H*30度之外再加上每过一分钟时针转动的角度也就是30/60
h.style.transform=`rotate(${hour*30+30/60*min}deg)`;
//走1分钟会转6度
m.style.transform=`rotate(${min*6}deg)`;
//走1秒也是转6度
s.style.transform=`rotate(${sec*6}deg)`;
}
//设置定时器每隔一秒执行一次
setInterval(function(){
current();
},1000);
</script>
</html>
网友评论