JS实现时钟
先看一下最终的效果：http://www.gongx.top/xian/time.html
不会做动图，就放到我个人网站上去了，大家可以去看一下。
本来不想记录这个，但是老师的一个操作让我突然生出一个念头：
我靠，还能这么操作？
话不多说，开始分析一下。
结构如下：
1、写出最外层wrap的样式来
#wrap{
width: 400px;
height: 400px;
border: 10px solid #999;
border-radius: 50%;
margin: 100px auto;
/*因为里面的元素和定会用到定位，而且是根据这个div定位，所以价格定位属性 */
position: relative;
}
2、将一个大体的测试界面搭建起来看一下
知识点一：:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
知识点二：-webkit-transform-origin:设置旋转的基点
知识点三：-webkit-transform:rotate(度数);设置围绕基点旋转的度数
当然，我们不能用css一个刻度一个刻度的设置，现在写出来看一下，一会用Js代码生成。
ul{
list-style:none;
margin: 0;
padding: 0;
height: 400px;
}
#wrap ul li{
width: 3px ;
height: 6px;
border-radius: 10px;
background-color:#666 ;
position: absolute;
left: 199px;
top: 0;
/*设置刻度以表盘的中心为基点进行旋转*/
-webkit-transform-origin:center 200px; /*左右 上下*/
}
/*现针对每个刻度旋转看一下效果 */
#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}
#wrap ul li:nth-of-type(5n+1){height:12px;}
3、先把刻度注释掉，一会用Js生成，现在将指针的样式写出来，
#hour{
width: 6px;
height: 75px;
background-color: #000;
position: absolute;
left: 197px;
top: 125px;
}
#min{
width: 4px;
height: 105px;
background-color: #999;
position: absolute;
left: 198px;
top: 95px;
}
#sec{
width: 2px;
height: 125px;
background-color: red;
position: absolute;
left: 197px;
top: 75px;
}
#ico{
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #666;
position: absolute;
top: 193px;
left: 193px;
}
4、因为指针旋转是按照底部中心旋转，所以把三个指针的旋转基点移动到底部中间
#hour,#min,#sec{
-webkit-transform-origin: bottom;
}
5、现在通过js代码，把刻度加进来---通过ul.innerHTML循环添.加
//[1]找到ul
var oUl = document.getElementsByTagName('ul')[0];
//[2]定义一个变量保存循环生成的
var strLi = '';
//[3]循环生成并添加到strLi中
for(var i=0;i<60;i++){
strLi +='';
}
//[4]将strLi添加到ul中
oUl.innerHTML = strLi;
6、现在给刚刚添加的
添加样式-----------旋转这里就是老师让我眼前一亮的地方，直接拿到标签，然后往里边插入数据
我是不是太没见识了一点。。。。哈哈哈
这里有一点需要注意，oStyle.innerHTML += strCss;
是加等，不是单纯的赋值，如果像之前
//[*1]找到标签中
oStyle.innerHTML += strCss;
7、现在界面已经搭建完成了，下面就是需要让指针动起来了。
//(a)先找到这些指针
var oHour = document.getElementById('hour');
var oMin = document.getElementById('min');
var oSec = document.getElementById('sec');
//(b)写一个函数让指针动起来
function toTime(){
//(b-1)拿到时间对象
var oDate = new Date();
//(b-2)拿到此时的时间
var iSec = oDate.getSeconds();
var iMin = oDate.getMinutes()+iSec/60;
var iHour = oDate.getHours()+iMin/60;
//(b-3)根据此时的时间给指针赋值
oSec.style.webkitTransform = 'rotate('+(iSec*6)+'deg)';
oMin.style.webkitTransform = 'rotate('+(iMin*6)+'deg)';
oHour.style.webkitTransform = 'rotate('+(iHour*30)+'deg)';
}
//(c)添加定时器,动起来
setInterval(toTime,1000);
ok,已经跑起来了；
下面总结一下用到的知识点：
1）选择器 nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
2）渐变 -webkit-transform-origin:设置旋转的基点
-webkit-transform:rotate(度数);设置围绕基点旋转的度数
3）时间函数 var oDate = new Date();-----------------声明时间对象
oDate.getHours()------------------小时
oDate.getHours()-------------------分钟
oDate.getHours()--------------------秒数