Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.face{
width: 500px;
height: 500px;
border: 20px solid blue;
border-radius: 50%;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.hourNum{
display: inline-block;
width: 40px;
height: 40px;
font-size: 40px;
font-weight: bold;
}
.point{
width: 500px;
height: 10px;
/*background-color: black;*/
position: absolute;
top: 245px;
float: left;
margin: 0 0;
}
.point span{
margin: -18px 10px;
}
.point span:nth-child(1){
float: left;
}
.point span:nth-child(2){
float: right;
}
.point:nth-child(1){
transform: rotate(-90deg);
}
.point:nth-child(1) span{
transform: rotate(90deg);
}
.point:nth-child(2){
transform: rotate(-60deg);
}
.point:nth-child(2) span{
transform: rotate(60deg);
}
.point:nth-child(3){
transform: rotate(-30deg);
}
.point:nth-child(3) span{
transform: rotate(30deg);
}
.point:nth-child(5){
transform: rotate(30deg);
}
.point:nth-child(5) span{
transform: rotate(-30deg);
}
.point:nth-child(6){
transform: rotate(60deg);
}
.point:nth-child(6) span{
transform: rotate(-60deg);
}
.hPoint{
width: 200px;
height: 30px;
/*background-color: red;*/
position: absolute;
top: 235px;
left: 150px;
}
.hHalf{
width: 100px;
height: 30px;
background-color: red;
float: right;
}
.mPoint{
width: 300px;
height: 20px;
/*background-color: yellow;*/
position: absolute;
top: 240px;
left: 100px;
}
.mHalf{
width: 150px;
height: 20px;
background-color: yellow;
float: right;
}
.sPoint{
width: 400px;
height: 10px;
/*background-color: green;*/
position: absolute;
top: 245px;
left: 50px;
}
.sHalf{
width: 200px;
height: 10px;
background-color: green;
float: right;
}
.center{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
top: 225px;
left: 225px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="face">
<div class="point">
<span class="hourNum">6</span>
<span class="hourNum">12</span>
</div>
<div class="point">
<span class="hourNum">7</span>
<span class="hourNum">1</span>
</div>
<div class="point">
<span class="hourNum">8</span>
<span class="hourNum">2</span>
</div>
<div class="point">
<span class="hourNum">9</span>
<span class="hourNum">3</span>
</div>
<div class="point">
<span class="hourNum">10</span>
<span class="hourNum">4</span>
</div>
<div class="point">
<span class="hourNum">11</span>
<span class="hourNum">5</span>
</div>
<div class="hPoint"><div class="hHalf"></div></div>
<div class="mPoint"><div class="mHalf"></div></div>
<div class="sPoint"><div class="sHalf"></div></div>
<div class="center"></div>
</div>
<script type="text/javascript">
var h = document.querySelector(".hPoint");
var m = document.querySelector(".mPoint");
var s = document.querySelector(".sPoint");
var timer = setInterval(timeRun,50);
function timeRun(){
var date = new Date();
var seconds = date.getSeconds();
var hours = date.getHours();
var minutes = date.getMinutes();
var angle1 = seconds*6-90;
var angle2 = (minutes+seconds/60)*6-90;
var angle3 = (hours+minutes/60)*30-90;
s.style.transform = "rotate(" + angle1 + "deg)";
m.style.transform = "rotate(" + angle2 + "deg)";
h.style.transform = "rotate(" + angle3 + "deg)";
}
</script>
</body>
</html>