js时钟demo | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:40px;
}
.container{
position:relative;
width:800px;
height:800px;
margin:0 auto;
border:1px solid #F00;
border-radius: 50%;
}
.box{
position:absolute;
width:40px;
height:800px;
/*background:yellow;*/
margin-left:380px;
text-align: center;
}
.num1{
transform: rotate(0deg);
}
.num2{
transform: rotate(30deg);
}
.num3{
transform: rotate(60deg);
}
.num4{
transform: rotate(90deg);
}
.num5{
transform: rotate(120deg);
}
.num6{
transform: rotate(150deg);
}
.box p{
position: absolute;
bottom: 0;
/*background: red;*/
width: 40px;
text-align: center;
}
.rotate{
transform: rotate(180deg);
}
.hand{
position: absolute;
left: 400px;
}
.hour{
width: 20px;
height: 200px;
background: black;
border-radius: 10px;
margin-left: -10px;
margin-top: 200px;
transform-origin: center 200px;
}
.minutes{
width: 20px;
height: 350px;
background: red;
border-radius: 10px;
margin-left: -10px;
margin-top: 50px;
transform-origin: center 350px;
}
.second{
width: 10px;
height: 400px;
background: pink;
border-radius: 10px;
margin-left: -5px;
transform-origin: center 400px;
}
.circle{
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgray;
position: absolute;
top: 400px;
left: 400px;
margin-left: -10px;
margin-top: -10px;
}
.text{
width: 300px;
height: 100px;
position: absolute;
border: 1px solid pink;
left: 50%;
margin-left: -150px;
top: 60%;
text-align: center;
line-height: 100px;
font-size: 15px;
}
span{
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="box num1">12<p>6</p></div>
<div class="box num2">1<p>7</p></div>
<div class="box num3">2<p>8</p></div>
<div class="box num4">3<p class="rotate">9</p></div>
<div class="box num5">4<p class="rotate">10</p></div>
<div class="box num6">5<p class="rotate">11</p></div>
<div class="text">

</div>
<div class="hand hour"></div>
<div class="hand minutes"></div>
<div class="hand second"></div>
<div class="circle"></div>
</div>
</body>
<script>
function $s(x){
return document.querySelector(x)
}
function $(x){
return document.querySelector(x)
}
setInterval(time,1000);
function time(){
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
document.querySelector(".hour").style.transform="rotate("+h*30+"deg)";
document.querySelector(".minutes").style.transform="rotate("+m*6+"deg)";
document.querySelector(".second").style.transform="rotate("+s*6+"deg)";
var html=
"<span>"+date.getFullYear()+"</span>年"+
"<span>"+(date.getMonth()+1)+"</span>月"+
"<span>"+date.getDay()+"</span>日"+
"<span>"+h+"</span>点"+
"<span>"+m+"</span>分"+
"<span>"+s+"</span>秒"
$(".text").innerHTML=html;
}
</script>
</html>

来源：https://www.cnblogs.com/wangyalijas/p/5836465.html

标签

demo