内容
上方是简易的刻度时钟,下方是电子时钟,上下的时间需与北京时间实时对应。
原理
使用style对body里标签添加旋转样式,
设置getTime来获取时间
代码
<!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">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none
}
body{
width: 100vw;
height: 100vh;
background-color: white;
}
#clock{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: black;
margin: 50px auto;
position: relative;
}
#second{
position: absolute;
top:50% ;
left: 50%;
width: 4px;
height: 130px;
background-color: white;
z-index: 3;
transform-origin:bottom center ;
}
#minute{
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 110px;
background-color:rgb(0, 156, 218);
z-index: 2;
transform-origin:bottom center ;
}
#hour{
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 70px;
background-color:red;
z-index: 1;
transform-origin:bottom center ;
transition: all ;
}
i{
display: block;
box-sizing: border-box;
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
}
#timetable{
width: 300px;
height:50px;
margin: 50px auto;
border-radius: 20px;
font-size: 20px;
text-align: center;
line-height: 20px;
}
</style>
<body>
<div id="clock">
<i></i>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div id="timetable"></div>
<script>
var hour=document.getElementById("hour");
var minute=document.getElementById("minute");
var second=document.getElementById("second");
function getTime(){
const time=new Date();
var hours=time.getHours();
var minutes=time.getMinutes();
var seconds=time.getSeconds();
var timetable=document.getElementById("timetable");
timetable.innerHTML=time;
hour.style.transform=`translate(-50%,-100%) rotate(${hours*30}deg)`;
minute.style.transform=`translate(-50%,-100%) rotate(${minutes*6}deg)`;
second.style.transform=`translate(-50%,-100%) rotate(${seconds*6}deg)`;
}
getTime();
setInterval(getTime,1000);
</script>
</body>
</html>
效果