JS+CSS案例：用CSS+JS做美丽的拟真时钟

JS+CSS案例：用CSS+JS做美丽的拟真时钟

今天给各人分享一个挺酷的CSS+js模拟的时钟。
案例结果图：

案例分析

通过CSS画一个表的表面，通过JS获取当前时间，并控制表针做对应角度的旋转。
制作时钟表面

HTML结构

起首，我们要界说一个表盘，然后再表盘里部署刻度，还有3、6、9、12四个大数字，当然，还有3个指针（时针、分针、秒针’）。表盘上就这些东西，我们写HTML结构如下：

1. <div id="clock">
2.     <!-- 表盘 -->
3.     <div class="frame-face">
4.         <!-- 指针 -->
5.         <div class="hours-hand"></div>
6.         <div class="minutes-hand"></div>
7.         <div class="seconds-hand"></div>
8.         <!-- 数字 -->
9.         <ul id="digits">
10.           <li>3</li>
11.           <li>6</li>
12.           <li>9</li>
13.           <li>12</li>
14.         </ul>        
15.         <!-- 刻度 -->
16.         <ul id="minute-marks"></ul>
17.     </div>
18. </div>

复制代码

CSS样式表

接下来，我们就来使用CSS来完成表面的设计：

1. /* style 用CSS做时钟 */
3. *{ margin: 0; padding: 0;}
5. #clock{
6.   margin-top: 10%;
7. }
9. #clock .frame-face {
10.   position: relative;
11.   width: 30em;
12.   height: 30em;
13.   margin: 2em auto;
14.   border-radius: 50%;
15.   background: -webkit-linear-gradient(top, #fafafa, #ccc);
16.   background: -moz-linear-gradient(top, #fafafa, #ccc);
17.   background: linear-gradient(top, #fafafa, #ccc);
18.   box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.5);  
19. }
21. #minute-marks li {
22.   display: block;
23.   width: 0.2em;
24.   height: 0.6em;
25.   background: #929394;
26.   position: absolute;
27.   top: 50%;
28.   left: 50%;
29.   margin: -0.4em 0 0 -0.1em;
30. }
31. #digits {
32.     width: 30em;
33.     height: 30em;
34.     border-radius: 15em;   
35. }
36. #digits li {
37.   font-size: 3.4em;
38.   display: block;
39.   width: 2.4em;
40.   height: 2.4em;
41.   position: absolute;
42.   top: 50%;
43.   left: 50%;
44.   line-height: 2.4em;
45.   text-align: center;
46.   margin: -1.2em 0 0 -1.2em;
47.   font-weight: bold;
48. }
50. /* 四个数字的位置控制 */
51. #digits li:nth-child(1) {
52.   transform: translate(3em, 0)
53. }
54. #digits li:nth-child(2) {
55.   transform: translate(0, 3em)
56. }
57. #digits li:nth-child(3) {
58.   transform: translate(-3em, 0)
59. }
60. #digits li:nth-child(4) {
61.   transform: translate(0, -3em)
62. }
65. #digits:before {
66.   content:'';
67.   width:1.6em;
68.   height:1.6em;
69.   border-radius:.8em;
70.   position:absolute;
71.   top:50%; left:50%;
72.   margin:-.8em 0 0 -.8em;
73.   background:#121314;
74. }
75. #digits:after {
76.   content:'';
77.   width:4em;
78.   height:4em;
79.   border-radius:2.2em;
80.   position:absolute;
81.   top:50%; left:50%;
82.   margin:-2.1em 0 0 -2.1em;
83.   border:.1em solid #c6c6c6;
84.   background:-webkit-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
85.   background:-moz-radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
86.   background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
87. }
89. /* 时针 */
90. #clock .hours-hand {
91.     width:.8em;
92.     height:8em;
93.     border-radius:.5em;
94.     background:#232425;
95.     position:absolute;
96.     bottom:50%;
97.     left:50%;
98.     margin:0 0 -.8em -.4em;
99.     box-shadow:#232425 0 0 2px;
100.     transform-origin:0.4em 7.2em;
101.     transform:rotate(-25deg);
102. }
103. /* 分针 */
104. #clock .minutes-hand {
105.     width:.6em;
106.     height:10.5em;
107.     border-radius:.5em;
108.     background:#343536;
109.     position:absolute;
110.     bottom:50%;
111.     left:50%;
112.     margin:0 0 -0.5em -.4em;
113.     box-shadow:#343536 0 0 2px;
114.     transform-origin:0.4em 10em;
115. }
117. /* 秒针 */
118. #clock .seconds-hand {
119.   width:.2em;
120.   height:14em;
121.   border-radius:.1em .1em 0 0/10em 10em 0 0;
122.   background:#c00;
123.   position:absolute;
124.   bottom:50%; left:50%;
125.   margin:0 0 -2em -.1em;
126.   box-shadow:rgba(0,0,0,.8) 0 0 .2em;
127.   transform-origin:0.1em 12em;
128. }
129. #clock .seconds-hand:after {
130.   content:'';
131.   width:1.4em;
132.   height:1.4em;
133.   border-radius:.7em;
134.   background:inherit;
135.   position:absolute;
136.   left:-.65em; bottom:1.35em;
137. }

复制代码

现在我们来看看这个简约的时钟：

生成刻度：

css做刻度太麻烦了。。。

1. window.onload = function () {
2.   // 生成刻度
3.   let markWrap = document.getElementById('minute-marks')
5.   for (let index = 0; index < 60; index++) {
6.     let markItem = document.createElement('li')
7.     markItem.style.cssText = "transform:rotate(" + index * 6 + "deg) translateY(-12.7em)";
8.     if (index % 5 == 0) {
9.       markItem.style.width = "0.3em";
10.       markItem.style.height = "1em";
11.     }
12.     markWrap.appendChild(markItem)
13.   }
14. }

复制代码

控制时钟的JS代码

表盘完成，接下来写个js控制表针的旋转。 把JS写在页面最下面：

1. setInterval(function () {
2.     // 获得系统当前时间
3.     var time = new Date();
4.     var hour = time.getHours()
5.     var minute = time.getMinutes();
6.     var second = time.getSeconds();
7.     var hournum;
8.    
9.     // 控制表针转动
10.     if (hour > 12) {
11.       hournum = ((hour - 12) + minute / 60) * 30;
12.     } else {
13.       hournum = (hour + minute / 60 * 100) * 30;
14.     }
15.     var minnum = (minute + second / 60) * 6 + second / 60;
16.     var sennum = second * 6;
17.     document.getElementsByClassName("hours-hand")[0].style.transform = "rotate(" + hournum + "deg)"
18.     document.getElementsByClassName("minutes-hand")[0].style.transform = "rotate(" + minnum + "deg)"
19.     document.getElementsByClassName("seconds-hand")[0].style.transform = "rotate(" + sennum + "deg)"
21.         // 输出数字样式时间到电子表
22.     if(hour<10){
23.         hour="0"+parseInt(hour);
24.     }
25.     if(minute<10){
26.         minute="0"+parseInt(minute);
27.     }
28.     if(second<10){
29.         second="0"+parseInt(second);
30.     }
31.   }, 1000);

复制代码

郑重说明：这个代码不是我原创的。当时以为很酷，就复制下来放存到了我的有道里，时间久远，转载的泉源找不到了。本例对样式和结构做了少许调整，分享给各人，供各人学习和借鉴。非常感谢原作者！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。