在上一篇博文中实现了秒针的转动，接下来需要进行实现分针的布局和旋转角度计算和时针的布局和旋转角度计算
时钟案例-分针的布局和旋转角度计算
实现的效果图：
实现该效果的css代码与HTML代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8
9 padding: 0px;
10 margin: 0px;
11 }
12 #clock{
13 width: 800px;
14 height: 800px;
15 border: 1px solid red;
16 margin: auto;
17 background: url(img/timg.png) 0px 0px no-repeat;
18 background-size: 100% 100%;
19 position: relative;
20 }
21 .second{
22
23 width: 22px;
24 height: 373px;
25 /*border: 1px solid red;*/
26 background: url(img/pointer.png) -9px 0px no-repeat;
27 background-size: 606% 100%;
28 position: absolute;
29 left: 393px;
30 top: 135px;
31 opacity: 0.5;
32 transform: rotate(46deg);
33 transform-origin: 11px 273px;
34
35 }
36 .secHead{
37
38 width: 40px;
39 height: 40px;
40 background: url(img/one.jpg) 0px 0px no-repeat;
41 background-size: 100% 100%;
42 position: absolute;
43 left: -10px;
44 top: 64px;
45 border-radius: 50%;
46
47 }
48
49 .minute{
50
51 width: 22px;
52 height: 373px;
53 /*border: 1px solid red;*/
54 background: url(img/pointer.png) -53px 0px no-repeat;
55 background-size: 606% 100%;
56 position: absolute;
57 left: 393px;
58 top: 135px;
59 opacity: 0.5;
60 transform: rotate(100deg);
61 transform-origin: 11px 273px;
62
63 }
64 </style>
65 <script>
66 var secDegree=0;
67 var minDegree=0;
68
69 function bodyload(){
70 var now=new Date();
71 var sec=now.getSeconds();
72 secDegree=sec*6;//当前的秒数乘以6
73
74
75 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
76 //计算当前分针旋转的角度
77 var min=now.getMinutes();
78 minDegree=min*(0.1*60);
79
80
81
82
83
84 }
85 //每秒钟调用一次
86 function clockRotate(){
87 //秒针的旋转
88 secDegree+=6;
89 var divSecond=document.getElementsByClassName("second");//getElementsByClassName带s因此需要返回一个数组
90 divSecond[0].style.transform="rotate("+secDegree+"deg)";
91
92
93 //分针的旋转
94 minDegree+=0.1;//(360/3600)
95 var divMinute=document.getElementsByClassName("minute");//getElementsByClassName带s因此需要返回一个数组
96 divMinute[0].style.transform="rotate("+minDegree+"deg)";
97 }
98 //启动定时器，定时调用旋转函数
99 setInterval("clockRotate()",1000);
100 </script>
101 </head>
102 <body onload="bodyload()">
103 <div id="clock">
104 <div class="second">
105 <div class="secHead">
106
107
108 </div>
109
110
111 </div>
112 <div class="minute">
113
114
115 </div>
116
117
118 </div>
119 </body>
120 </html>
Clock.html
实现的js代码：
1 <script>
2 var secDegree=0;
3 var minDegree=0;
4
5 function bodyload(){
6 var now=new Date();
7 var sec=now.getSeconds();
8 secDegree=sec*6;//当前的秒数乘以6
9
10
11 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
12 //计算当前分针旋转的角度
13 var min=now.getMinutes();
14 minDegree=min*(0.1*60);
15
16
17
18
19
20 }
21 //每秒钟调用一次
22 function clockRotate(){
23 //秒针的旋转
24 secDegree+=6;
25 var divSecond=document.getElementsByClassName("second");//getElementsByClassName带s因此需要返回一个数组
26 divSecond[0].style.transform="rotate("+secDegree+"deg)";
27
28
29 //分针的旋转
30 minDegree+=0.1;//(360/3600)
31 var divMinute=document.getElementsByClassName("minute");//getElementsByClassName带s因此需要返回一个数组
32 divMinute[0].style.transform="rotate("+minDegree+"deg)";
33 }
34 //启动定时器，定时调用旋转函数
35 setInterval("clockRotate()",1000);
36 </script>
其中：分针的旋转角度360/3600=0.1
minDegree+=0.1;
计算当前分针旋转的角度:
当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
var min=now.getMinutes();
minDegree=min*(0.1*60);
时钟案例-时针的布局和旋转角度计算
时针一秒钟旋转的角度
360度*（12小时*3600秒）
//时针的旋转
houDegree+=0.008333;//360/(12*3600)=0.008333//时针一秒钟旋转的角度
var divHour=document.getElementsByClassName("hour");//getElementsByClassName带s因此需要返回一个数组
divHour[0].style.transform="rotate("+houDegree+"deg)";
计算当前时针旋转的角度：
//计算当前时针旋转的角度
var hou=now.getHours();
// houDegree=hou*(360/12);
houDegree=(hou+min/60)*30;
去掉透明度与调整初始旋转的角度的效果：
实现最终该效果的总代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8
9 padding: 0px;
10 margin: 0px;
11 }
12 #clock{
13 width: 800px;
14 height: 800px;
15 border: 1px solid red;
16 margin: auto;
17 background: url(img/timg.png) 0px 0px no-repeat;
18 background-size: 100% 100%;
19 position: relative;
20 }
21 .second{
22
23 width: 22px;
24 height: 373px;
25 /*border: 1px solid red;*/
26 background: url(img/pointer.png) -9px 0px no-repeat;
27 background-size: 606% 100%;
28 position: absolute;
29 left: 393px;
30 top: 135px;
31
32 /* opacity: 0.5;*/
33 transform: rotate(0deg);
34 transform-origin: 11px 273px;
35
36 }
37 .secHead{
38
39 width: 40px;
40 height: 40px;
41 background: url(img/one.jpg) 0px 0px no-repeat;
42 background-size: 100% 100%;
43 position: absolute;
44 left: -10px;
45 top: 64px;
46 border-radius: 50%;
47
48 }
49
50 .minute{
51
52 width: 22px;
53 height: 373px;
54 /*border: 1px solid red;*/
55 background: url(img/pointer.png) -53px 0px no-repeat;
56 background-size: 606% 100%;
57 position: absolute;
58 left: 393px;
59 top: 135px;
60 /*opacity: 0.5;*/
61 transform: rotate(0deg);
62 transform-origin: 11px 273px;
63
64 }
65
66 .hour{
67
68 width: 31px;
69 height: 373px;
70 /*border: 1px solid red;*/
71 background: url(img/pointer.png) -101px 0px no-repeat;
72 background-size: 468% 100%;/*背景图片的缩放*/
73 position: absolute;
74 left: 389px;
75 top: 135px;
76 /* opacity: 0.5;*/
77 transform: rotate(0deg);
78 transform-origin: 16px 273px;
79
80 }
81 </style>
82 <script>
83 var secDegree=0;
84 var minDegree=0;
85 var houDegree=0;
86
87 function bodyload(){
88 var now=new Date();
89 var sec=now.getSeconds();
90 secDegree=sec*6;//当前的秒数乘以6
91
92
93 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
94 //计算当前分针旋转的角度
95 var min=now.getMinutes();
96 // minDegree=min*(0.1*60);
97 minDegree=min*6;
98
99
100 //计算当前时针旋转的角度
101 var hou=now.getHours();
102 // houDegree=hou*(360/12);
103 houDegree=(hou+min/60)*30;
104
105
106
107
108
109 }
110 //每秒钟调用一次
111 function clockRotate(){
112 //秒针的旋转
113 secDegree+=6;
114 var divSecond=document.getElementsByClassName("second");//getElementsByClassName带s因此需要返回一个数组
115 divSecond[0].style.transform="rotate("+secDegree+"deg)";
116
117
118 //分针的旋转
119 minDegree+=0.1;//
120 var divMinute=document.getElementsByClassName("minute");//getElementsByClassName带s因此需要返回一个数组
121 divMinute[0].style.transform="rotate("+minDegree+"deg)";
122
123 //时针的旋转
124 houDegree+=0.008333;//360/(12*3600)=0.008333//时针一秒钟旋转的角度
125 var divHour=document.getElementsByClassName("hour");//getElementsByClassName带s因此需要返回一个数组
126 divHour[0].style.transform="rotate("+houDegree+"deg)";
127 }
128 //启动定时器，定时调用旋转函数
129 setInterval("clockRotate()",1000);
130 </script>
131 </head>
132 <body onload="bodyload()">
133 <div id="clock">
134 <div class="hour">
135
136
137 </div>
138 <div class="minute">
139
140
141 </div>
142
143 <div class="second">
144 <div class="secHead">
145
146
147 </div>
148
149
150 </div>
151
152
153
154
155 </div>
156 </body>
157 </html>
最终效果
原文地址：https://www.cnblogs.com/jiguiyan/p/11437430.html
时间： 2024-08-01 04:30:48