标签：
利用css+原生js制作简单的钟表。效果如下所示
实现该效果，分三大块：html、javascript、css
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的属性需要了解，比如定位(position)，边框圆角(border-radius),变换(transform)等
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属性向元素添加圆角边框，可以设置四个圆角的大小，本例中使用该属性将clock元素设置成一个圆
此处写了一个示例：4个div元素，宽高都是100px，border-radius不同时的效果：
transform属性向元素应用2D或3D旋转，该属性允许我们对元素进行旋转、缩放、移动、或倾斜。本例中时针、分针、秒针、刻度等均用transform属性设置旋转；另外，transform-origin属性可以设置元素的基点位置
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{ 91 width:92px; 92 height:30px; 93 line-height:30px; 94 text-align:center; 95 position:absolute; 96 top:270px; 97 left:154px; 98 z-index:11; 99 background-color:#555; 100 padding:0; 101 box-shadow:0px 0px 9px 2px #222 inset; 102 } 103 .time{ 104 width:30px; 105 height:30px; 106 text-align:center; 107 float:left; 108 color:#fff; 109 font-weight:bold; 110 } 111 #minute-time{ 112 border-left:1px solid #fff; 113 border-right:1px solid #fff; 114 } 115 116 /* 刻度 */ 117 .clock-scale{ 118 width:195px; 119 height:2px; 120 transform-origin:0% 50%; 121 z-index:7; 122 position:absolute; 123 top:199px; 124 left:200px; 125 } 126 .scale-show{ 127 width:12px; 128 height:2px; 129 background-color:#555; 130 float:left; 131 } 132 .scale-hidden{ 133 width:183px; 134 height:2px; 135 float:left; 136 }
js部分没什么好说的，简单的dom操作，setInterval函数每隔一秒执行一次，修改指针的角度和显示的时间即可。代码如下
(function(){ window.onload=initNumXY(200, 160, 40,40); var hour_line = document.getElementById("hour-line"); var minute_line = document.getElementById("minute-line"); var second_line = document.getElementById("second-line"); var date_info = document.getElementById("date-info"); var week_day = [ ‘星期日‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘ ]; var hour_time = document.getElementById("hour-time"); var minute_time = document.getElementById("minute-time"); var second_time = document.getElementById("second-time"); function setTime(){ var this_day = new Date(); var hour = (this_day.getHours() >= 12) ? (this_day.getHours() - 12) : this_day.getHours(); var minute = this_day.getMinutes(); var second = this_day.getSeconds(); var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6); var year = this_day.getFullYear(); var month = ((this_day.getMonth() + 1) < 10 ) ? "0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1); var date = (this_day.getDate() < 10 ) ? "0"+this_day.getDate() : this_day.getDate(); var day = this_day.getDay(); hour_line.style.transform = ‘rotate(‘ + hour_rotate + ‘deg)‘; minute_line.style.transform = ‘rotate(‘ + (minute*6 - 90) + ‘deg)‘; second_line.style.transform = ‘rotate(‘ + (second*6 - 90)+‘deg)‘; date_info.innerHTML = year + "-" + month + "-" + date + " " + week_day[day]; hour_time.innerHTML = (this_day.getHours() < 10) ? "0" + this_day.getHours() : this_day.getHours(); minute_time.innerHTML = (this_day.getMinutes() < 10) ? "0" + this_day.getMinutes() : this_day.getMinutes(); second_time.innerHTML = (this_day.getSeconds() < 10) ? "0" + this_day.getSeconds():this_day.getSeconds(); } setInterval(setTime, 1000); function initNumXY(R, r, w, h){ var numXY = [ { "left" : R + 0.5 * r - 0.5 * w, "top" : R - 0.5 * r * 1.73205 - 0.5 * h }, { "left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0.5 * r - 0.5 * h }, { "left" : R + r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R + 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R + 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * w, "top" : R + r - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top" : R + 0.5 * r * 1.732 - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R + 0.5 * r - 0.5 * h }, { "left" : R - r - 0.5 * w, "top" : R - 0.5 * h }, { "left" : R - 0.5 * r * 1.73205 - 0.5 * w, "top" : R - 0.5 * r - 0.5 * h }, { "left" : R - 0.5 * r - 0.5 * w, "top": R - 0.5 * r * 1.73205 - 0.5 * h }, { "left" : R - 0.5 * w, "top" : R - r - 0.5 * h } ]; var clock = document.getElementById("clock"); for(var i = 1; i <= 12; i++){ if(i%3 == 0) { clock.innerHTML += "<div class=‘clock-num em_num‘>"+i+"</div>"; } else { clock.innerHTML += "<div class=‘clock-num‘>" + i + "</div>"; } } var clock_num = document.getElementsByClassName("clock-num"); for(var i = 0; i < clock_num.length; i++) { clock_num[i].style.left = numXY[i].left + ‘px‘; clock_num[i].style.top = numXY[i].top + ‘px‘; } for(var i = 0; i < 60; i++) { clock.innerHTML += "<div class=‘clock-scale‘> " + "<div class=‘scale-hidden‘></div>" + "<div class=‘scale-show‘></div>" + "</div>"; } var scale = document.getElementsByClassName("clock-scale"); for(var i = 0; i < scale.length; i++) { scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)"; } } })();
标签：
原文地址：http://www.cnblogs.com/LikeStar/p/5659131.html
