WEB前端初学者笔记（12）--时钟的制作

1.setInterval定时器

var aaa=function (){

console.log(new Date())

}

setInterval(aaa,1000)括号内第一个表示函数，第二个以毫秒为单位响应，代表多少毫秒之后执行一次此函数。

2.Date（）函数

调取时间的函数

console.log(new Date().getFullYear)----四位数年份

console.log(new Date().getMonth)---- 月份，从0计数所以少1

console.log(new Date().getDate)----几日

console.log(new Date().getDay)----星期几

console.log(new Date().getHours)----小时

console.log(new Date().getMinutes)----分钟

console.log(new Date().getSeconds)-----秒钟

3.代码示例

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>Document</title>
 9     <style>
10         #clock {
11             position: relative;
12             width: 260px;
13             height: 260px;
14             margin: 0 auto;
15             background: url("img/时钟.jpg");
16         }
17 
18         #mind {
19             position: absolute;
20             width: 10px;
21             height: 10px;
22             margin: 0 auto;
23             background-color: black;
24             border-radius: 50%;
25             left: 54%;
26             top: 43%;
27             z-index: 5;
28         }
29 
30         #s {
31             position: absolute;
32             width: 3px;
33             height: 100px;
34             background-color: red;
35             transform-origin: 50% 70%;
36             left: 55%;
37             top: 45px;
38         }
39 
40         #m {
41             position: absolute;
42             width: 3px;
43             height: 70px;
44             background-color: blue;
45             transform-origin: 50% 70%;
46             left: 55%;
47             top: 70px;
48         }
49 
50         #h {
51             position: absolute;
52             width: 5px;
53             height: 60px;
54             background-color: yellow;
55             transform-origin: 50% 70%;
56             left: 55%;
57             top: 80px;
58 
59         }
60     </style>
61 </head>
62 
63 <body>
64     <div class="clock" id="clock">
65         <div class="mind" id="mind"></div>
66         <div class="h" id="h"></div>
67         <div class="m" id="m"></div>
68         <div class="s" id="s"></div>
69 
70     </div>
71 </body>
72 
73 </html>
74 <script>
75     var s = document.getElementById("s")
76     var m = document.getElementById("m")
77     var h = document.getElementById("h")
78     function clock() {
79     var time=new Date(),
80         S=time.getSeconds(),
81         M=time.getMinutes(),
82         H=time.getHours()
83    s.style.transform='rotate('+S*6+'deg)'
84     m.style.transform='rotate('+(M+S/60)*6+'deg)'
85     h.style.transform='rotate('+(H+M/60+S/3600)*30+'deg)'
86     // 制作秒针要把每秒转换为度数
87     // 制作分针要把秒转换为分再去转换度数
88     // 制作时针就要转化分和秒为时再去转换度数
89 }
90     clock()
91     setInterval(clock,1000)
92 
93 </script>