制作简单钟表
2016-08-08 15:49 袁叶子 阅读(197) 评论(0) 编辑 收藏 举报
利用css+原生js制作简单的钟表。效果如下所示
实现该效果，分三大块：html、javascript、css
html部分
html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <link rel='stylesheet' href='外部的css文件路径' />
6 <title>时钟</title>
7 </head>
8 <body>
9 <div class="clock" id="clock">
10 <!-- 原点 -->
11 <div class="origin"></div>
12
13 <!-- 时分秒针 -->
14 <div class="clock-line hour-line" id="hour-line"></div>
15 <div class="clock-line minute-line" id="minute-line"></div>
16 <div class="clock-line second-line" id="second-line"></div>
17
18 <!-- 日期 -->
19 <div class="date-info" id="date-info"></div>
20 <!-- 时间 -->
21 <div class="time-info" >
22 <div class="time" id="hour-time"></div>
23 <div class="time" id="minute-time"></div>
24 <div class="time" id="second-time"></div>
25 </div>
26 </div>
27 <script type='text/javascript' src='外部的javascript文件路径'></script>
28 </body>
29 </html>
css部分
开始代码之前，有一些css的属性需要了解，比如定位(position)，边框圆角(border-radius),变换(transform)等
position属性
position属性规定元素的定位类型，有五个值：absolute、fixed、relative、static、inherit,默认为static，即没有定位，元素按正常文档流显示；这里主要用到的是absolute和relative
absulte值，将元素设置成绝对定位，相对于static定位意外的第一个上级元素进行定位，位置可以通过'left'、'top'、'right'、'bottom'属性进行定位；如果上级元素都是static定位，则相对于body元素的位置进行定位
本例中，设定最外层的div clock为relative，所有下级元素均设定为absolute绝对定位，然后通过设置left、top等属性的值，确定其相对于clock的位置。
border-radius属性
border-radius属性向元素添加圆角边框，可以设置四个圆角的大小，本例中使用该属性将clock元素设置成一个圆
此处写了一个示例：4个div元素，宽高都是100px，border-radius不同时的效果：
transform属性
transform属性向元素应用2D或3D旋转，该属性允许我们对元素进行旋转、缩放、移动、或倾斜。本例中时针、分针、秒针、刻度等均用transform属性设置旋转；另外，transform-origin属性可以设置元素的基点位置
css部分的代码
1 /* 全局 */
2 *{
3 margin:0;
4 padding:0;
5 }
6 .clock{
7 width:400px;
8 height:400px;
9 border:10px solid #333;
10 box-shadow: 0px 0px 20px 3px #444 inset;
11 border-radius:210px;
12 position:relative;
13 margin:5px auto;
14 z-index:10;
15 background-color:#f6f6f6;
16 }
17 /* 时钟数字 */
18 .clock-num{
19 width:40px;
20 height:40px;
21 font-size:22px;
22 text-align:center;
23 line-height:40px;
24 position:absolute;
25 z-index:8;
26 color:#555;
27 font-family:fantasy, 'Trebuchet MS';
28 }
29 .em_num{
30 font-size:28px;
31 }
32 /* 指针 */
33 .clock-line{
34 position:absolute;
35 z-index:20;
36 }
37 .hour-line{width:100px;
38 height:4px;
39 top:198px;
40 left:200px;
41 background-color:#000;
42 border-radius:2px;
43 transform-origin:0 50%;
44 box-shadow:1px -3px 8px 3px #aaa;
45 }
46 .minute-line{
47 width:130px;
48 height:2px;
49 top:199px;
50 left:190px;
51 background-color:#000;
52 transform-origin:7.692% 50%;
53 box-shadow:1px -3px 8px 1px #aaa;
54 }
55 .second-line{
56 width:170px;
57 height:1px;
58 top:199.5px;
59 left:180px;
60 background-color:#f60;
61 transform-origin:11.765% 50%;
62 box-shadow:1px -3px 7px 1px #bbb;
63 }
64 /* 原点 */
65 .origin{
66 width:20px;
67 height:20px;
68 border-radius:10px;
69 background-color:#000;
70 position:absolute;
71 top:190px;
72 left:190px;
73 z-index:14;
74 }
75
76 /* 日期 时间 */
77 .date-info{
78 width:160px;
79 height:28px;
80 line-height:28px;
81 text-align:center;
82 position:absolute;
83 top:230px;
84 left:120px;
85 z-index:11;
86 color:#555;
87 font-weight:bold;
88 font-family:'微软雅黑';
89 }
90 .time-info{