简易仿真时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul,li{
margin:0;
padding:0;
list-style: none;
}
.border{
height: 500px;
width: 500px;
border: 10px solid rgba(122,122,122,0.8);
border-radius: 50%;
margin: 0 auto;
position: relative;
}
.bg{
background-image: url("10.png") ;
background-repeat: no-repeat;
width:100%;
height:100%;
border-radius: 50%;
background-size: 150%;
background-position: -140px -85px;
position: relative;
}
.s{
width: 6px;
height: 15px;
background: rgba(0,108,255,0.8);
box-shadow:0 0 10px rgba(0,108,255,0.8);
position: absolute;
left:50%;
top: 2px;
margin-left: -3px;
transform-origin: 3px 248px ;
border-radius: 50%;
}
.s:nth-of-type(5n+1){
height: 20px;
background: rgba(255,0,48,0.5);
box-shadow: 0 0 10px rgba(255,0,48,0.8);
}
.s.active{
background: rgba(255,222,0,0.8);
box-shadow: 0 0 10px rgba(255,222,0,0.8);
}
.hour{
position: absolute;
height: 150px;
width: 10px;
background: rgba(255,0,0,0.8);
top:120px;
border-radius: 50% 50px;
margin-left: -5px;
left:50%;
transform-origin: 5px 130px;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 0 20px 0 rgba(255,0,0,0.8);
}
.minute{
position: absolute;
height: 180px;
width: 8px;
background: rgb(79,183,255);
top:110px;
border-radius:50px 50% ;
margin-left: -4px;
left:50%;
transform-origin: 4px 140px;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 0 20px 0 rgba(79,183,255,0.8);
}
.second{
position: absolute;
height: 230px;
width: 6px;
background: rgba(238,218,0,0.8);
top:70px;
border-radius: 50% 50% 4px 4px;
margin-left: -3px;
left:50%;
transform-origin:3px 180px ;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 0 20px 0 rgba(238,218,0,0.8);
}
.circle{
position: absolute;
height: 20px;
width: 20px;
border: 1px solid rgba(26,156,93,0.5);
border-radius: 50%;
top: 250px;
left: 250px;
transform: translateX(-50%) translateY(-50%);
background: rgb(0,0,0);
}
</style>
<body>
<div class="border">
<div class="bg">
<ul>
</ul>
</div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="circle"></div>
</div>
</body>
<script>
var ul = document.querySelector('ul');
var str = '';
for(var i=0;i<60;i++){
str+=`<li class="s" style = transform:rotate(${i*6}deg)></li>`
}
ul.innerHTML =str;
//获取时分秒针
var hTik = document.querySelector('.hour');
var mTik = document.querySelector('.minute');
var sTik = document.querySelector('.second');
setInterval(run,500);
var ss = document.querySelectorAll('.s');
function run(){
var time = new Date();
var s =time.getSeconds();
var m = time.getMinutes() + (s/60);
var h = time.getHours() + (m/60);
for(var i=0;i<60;i++){
ss[i].classList.remove('active') ;
}
hTik.style.transform = `rotate(${h*30}deg)`;
mTik.style.transform = `rotate(${m*6}deg)`;
sTik.style.transform = `rotate(${s*6}deg)`;
ss[s].classList.add('active') ;
}
run();
</script>
</html>
WEB前端学习交流群20 103791667
WEB前端学习交流群20 103791667
