<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Untitled Document </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>
<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" >
<!--<span></span> Year
<span></span> Month
<span></span> Day
<span></span> points
<span></span> points
<span></span> seconds--
</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> Year" +
"<span>" + (Date.getmonth () +1) + "</span> Month" +
"<span>" +date.getday () + "</span> Day" +
"<span>" +h+ "</span> points" +
"<span>" +m+ "</span> min" +
"<span>" +s+ "</span> seconds"
$ (". Text"). innerhtml=html;
}
</script>
JS Clock Demo