-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path简易时钟3.html
42 lines (42 loc) · 1.71 KB
/
简易时钟3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{width: 500px;height:500px;background: url(img/pan.jpg) no-repeat;margin:50px auto;background-size:cover;border-radius: 50%;position:relative;}
.hou{position:absolute;left:50%;top:50%;width:10px;height:80px;margin-left:-5px;margin-top:-80px;background: #000;border-radius: 50% 50% 0 0;-webkit-transform-origin:center bottom;:;}
.min{position:absolute;left:50%;top:50%;width:8px;height:120px;margin-left:-4px;margin-top:-120px;background: aqua;border-radius: 50% 50% 0 0;-webkit-transform-origin:center bottom;}
.sec{position:absolute;left:50%;top:50%;width:4px;height:150px;margin-left:-2px;margin-top:-150px;background: red;border-radius: 50% 50% 0 0;-webkit-transform-origin:center bottom;}
.cap{width: 20px;height: 20px;background: -webkit-radial-gradient(#ccc,#000);position:absolute;left:50%;top:50%;margin-top: -10px;margin-left: -10px;border-radius: 50%;}
</style>
<script>
window.onload=function(){
var oBox=document.querySelector('.box');
var oH=document.querySelector('.hou');
var oM=document.querySelector('.min');
var oS=document.querySelector('.sec');
function clock(){
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
oH.style.WebkitTransform='rotate('+(h*30+m/60*30)+'deg)';
oM.style.WebkitTransform='rotate('+(m*6+s/60*6)+'deg)';
oS.style.WebkitTransform='rotate('+(s*6)+'deg)';
};
clock();
setInterval(clock,1000);
};
</script>
</head>
<body>
<div class="box">
<div class="hou"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
</body>
</html>