利用css+原生js制作简单的钟表。效果如下所示
实现该效果，分三大块：html、javascript、css
html部分
html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成
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部分的代码
javascript部分
js部分没什么好说的，简单的dom操作，setInterval函数每隔一秒执行一次，修改指针的角度和显示的时间即可。代码如下
?1 (function(){ ?2 ????window.onload=initNumXY(200, 160, 40,40); ?3 ????var hour_line = document.getElementById("hour-line"); ?4 ????var minute_line = document.getElementById("minute-line"); ?5 ????var second_line = document.getElementById("second-line"); ?6 ????var date_info = document.getElementById("date-info"); ?7 ????var week_day = [ ?8 ??????‘星期日‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘ ?9 ????]; 10 ????var hour_time = document.getElementById("hour-time"); 11 ????var minute_time = document.getElementById("minute-time"); 12 ????var second_time = document.getElementById("second-time"); 13 ????function setTime(){ 14 ??????var this_day = new Date(); 15 ??????var hour = (this_day.getHours() >= 12) ? 16 ??????????(this_day.getHours() - 12) : this_day.getHours(); 17 ??????var minute = this_day.getMinutes(); 18 ??????var second = this_day.getSeconds(); 19 ??????var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6); 20 ??????var year = this_day.getFullYear(); 21 ??????var month = ((this_day.getMonth() + 1) < 10 ) ? 22 ??????????"0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1); 23 ??????var date = (this_day.getDate() < 10 ) ? 24 ??????????"0"+this_day.getDate() : this_day.getDate(); 25 ??????var day = this_day.getDay(); 26 ??????hour_line.style.transform = ‘rotate(‘ + hour_rotate + ‘deg)‘; 27 ??????minute_line.style.transform = ‘rotate(‘ + (minute*6 - 90) + ‘deg)‘; 28 ??????second_line.style.transform = ‘rotate(‘ + (second*6 - 90)+‘deg)‘; 29 ??????date_info.innerHTML = 30 ????????year + "-" + month + "-" + date + " " + week_day[day]; 31 ??????hour_time.innerHTML = (this_day.getHours() < 10) ? 32 ??????????"0" + this_day.getHours() : this_day.getHours(); 33 ??????minute_time.innerHTML = (this_day.getMinutes() < 10) ? 34 ??????????"0" + this_day.getMinutes() : this_day.getMinutes(); 35 ??????second_time.innerHTML = (this_day.getSeconds() < 10) ? 36 ??????????"0" + this_day.getSeconds():this_day.getSeconds(); 37 ????} 38 ????setInterval(setTime, 1000); 39 ??40 ????function initNumXY(R, r, w, h){ 41 ??????var numXY = [ 42 ????????{ 43 ??????????"left" : R + 0.5 * r - 0.5 * w, 44 ??????????"top" : R - 0.5 * r * 1.73205 - 0.5 * h 45 ????????}, 46 ????????{ 47 ??????????"left" : R + 0.5 * r * 1.73205 - 0.5 * w, 48 ??????????"top" : R - 0.5 * r - 0.5 * h 49 ????????}, 50 ????????{ 51 ??????????"left" : R + r - 0.5 * w, 52 ??????????"top" : R - 0.5 * h 53 ????????}, 54 ????????{ 55 ??????????"left" : R + 0.5 * r * 1.73205 - 0.5 * w, 56 ??????????"top" : R + 0.5 * r - 0.5 * h 57 ????????}, 58 ????????{ 59 ??????????"left" : R + 0.5 * r - 0.5 * w, 60 ??????????"top" : R + 0.5 * r * 1.732 - 0.5 * h 61 ????????}, 62 ????????{ 63 ??????????"left" : R - 0.5 * w, 64 ??????????"top" : R + r - 0.5 * h 65 ????????}, 66 ????????{ 67 ??????????"left" : R - 0.5 * r - 0.5 * w, 68 ??????????"top" : R + 0.5 * r * 1.732 - 0.5 * h 69 ????????}, 70 ????????{ 71 ??????????"left" : R - 0.5 * r * 1.73205 - 0.5 * w, 72 ??????????"top" : R + 0.5 * r - 0.5 * h 73 ????????}, 74 ????????{ 75 ??????????"left" : R - r - 0.5 * w, 76 ??????????"top" : R - 0.5 * h 77 ????????}, 78 ????????{ 79 ??????????"left" : R - 0.5 * r * 1.73205 - 0.5 * w, 80 ??????????"top" : R - 0.5 * r - 0.5 * h 81 ????????}, 82 ????????{ 83 ??????????"left" : R - 0.5 * r - 0.5 * w, 84 ??????????"top": R - 0.5 * r * 1.73205 - 0.5 * h 85 ????????}, 86 ????????{ 87 ??????????"left" : R - 0.5 * w, 88 ??????????"top" : R - r - 0.5 * h 89 ????????} 90 ??????]; 91 ??????var clock = document.getElementById("clock"); 92 ??????for(var i = 1; i <= 12; i++){ 93 ????????if(i%3 == 0) { 94 ??????????clock.innerHTML += "<div class=‘clock-num em_num‘>"+i+"</div>"; 95 ????????} else { 96 ??????????clock.innerHTML += "<div class=‘clock-num‘>" + i + "</div>"; 97 ????????} 98 ??????} 99 ??????var clock_num = document.getElementsByClassName("clock-num");100 ??????for(var i = 0; i < clock_num.length; i++) {101 ????????clock_num[i].style.left = numXY[i].left + ‘px‘;102 ????????clock_num[i].style.top = numXY[i].top + ‘px‘;103 ??????}104 ??????for(var i = 0; i < 60; i++) {105 ????????clock.innerHTML += "<div class=‘clock-scale‘> " +106 ???????????????????"<div class=‘scale-hidden‘></div>" +107 ???????????????????"<div class=‘scale-show‘></div>" +108 ??????????????????"</div>";109 ??????}110 ??????var scale = document.getElementsByClassName("clock-scale");111 ??????for(var i = 0; i < scale.length; i++) {112 ????????scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";113 ??????}114 ????}115 })();利用css+原生js制作简易钟表
原文地址：http://www.cnblogs.com/syp172654682/p/7588104.html