? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?鐘表
?今天，就來(lái)寫一下鐘表窄俏，第一篇文章，不要求寫多么完美碘菜，只求能讓大家或者自己懂凹蜈，之前見(jiàn)過(guò)很多大牛們寫的程序，對(duì)于菜鳥來(lái)說(shuō)的我忍啸，真的看的是天花亂墜仰坦，不知其然，更不知其所以然计雌。以后還是向他們多多學(xué)習(xí)吧悄晃。畢竟人應(yīng)該學(xué)會(huì)向前（錢）看。
1凿滤、 鐘表妈橄，首先我們要有個(gè)圓盤，那我們就造個(gè)圓盤,并加上刻度鸭巴，時(shí)針眷细、分針、秒針鹃祖。
這里面box為外層大邊框溪椎，kedu是表的刻度 ?下邊的hour、min、seconds代表時(shí)分秒
這里邊解釋一下為什么要把12放在最前面校读，因?yàn)楹筮叞褦?shù)字放在刻度盤上相應(yīng)位置的時(shí)候沼侣，要對(duì)數(shù)字進(jìn)行旋轉(zhuǎn)一定的角度，而12是不用旋轉(zhuǎn)歉秫，對(duì)應(yīng)的是所有span元素的第0個(gè)蛾洛，0乘以相應(yīng)的角度還是0，就相當(dāng)于不轉(zhuǎn)雁芙，這時(shí)候其實(shí)我有個(gè)想法轧膘，其實(shí)對(duì)于每一個(gè)數(shù)字來(lái)說(shuō)都可以當(dāng)做一個(gè)參照物，對(duì)其他數(shù)字進(jìn)行旋轉(zhuǎn)兔甘，不必拘泥于12這個(gè)數(shù)字谎碍，任何刻度都可以，但為了寫這個(gè)洞焙，還是先這樣寫蟆淀，回頭我嘗試之后再來(lái)做補(bǔ)充或者糾正≡璺耍可能大家這會(huì)迷糊了熔任，沒(méi)事，后面就會(huì)懂了唁情。
2疑苔、下面就是樣式了，本來(lái)是想先給圖片的荠瘪，但考慮到大家可以看代碼來(lái)想想他的樣子就先給代碼了
3夯巷、把數(shù)字放到圓盤上
這里就和前面的對(duì)應(yīng)上了，表盤360度哀墓，12個(gè)刻度趁餐，每個(gè)之間30度，那12放在第一個(gè)位置就是這里的i = 0;就等于不在動(dòng)篮绰，那么這里也有個(gè)問(wèn)題 后雷，剛旋轉(zhuǎn)完之后，數(shù)字自身的角度也會(huì)變化吠各，那就要把數(shù)字在旋轉(zhuǎn)回去可以了臀突，效果如圖：
4、下面就是時(shí)針贾漏、分針候学、和秒針了
時(shí)針、分針纵散、秒針樣式是基本上相同的梳码，只不過(guò)長(zhǎng)短的問(wèn)題隐圾，一共是200px,一半是100px,時(shí)針最短，height = 50px, top = 50px 正好是100px,時(shí)針掰茶、分針暇藏、秒針旋轉(zhuǎn)的時(shí)候以底部為中心進(jìn)行旋轉(zhuǎn)。
transform-origin:設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置.亦可以理解為對(duì)稱軸，基準(zhǔn)軸沪伙，可以通過(guò)它來(lái)做立方體
5瓮顽、接下來(lái)就是要把鐘表的時(shí)間設(shè)定為和現(xiàn)實(shí)中一樣的時(shí)間了，
var date = new Date(); ? console.log(date);這時(shí)候打印的就是現(xiàn)在準(zhǔn)確的時(shí)間焰坪，然后進(jìn)行賦值趣倾。
var hour = date.getHours()%12;這一步把獲取到的時(shí)間的小時(shí)給hour,對(duì)12取余是因?yàn)?4小時(shí)制度存在聘惦，如果是22點(diǎn)某饰，取余就是10，就會(huì)指向10的位置善绎。
? var min = date.getMinutes(); ?把獲取到的分鐘給min
var seconds = date.getSeconds();把獲取到的秒數(shù)給seconds
然后設(shè)置時(shí)間黔漂，秒針和分針都是滿60變0，時(shí)針是12變0禀酱，因?yàn)檫@里是取余所以是13炬守，變1。時(shí)針是每分鐘轉(zhuǎn)動(dòng)360/12/60 = 0.5度,分針每分鐘旋轉(zhuǎn)360/60 = 6度剂跟，秒針每秒旋轉(zhuǎn)360/60 = 0.6度
6、然后就是調(diào)用函數(shù)送淆，設(shè)置定時(shí)器税产，每秒來(lái)調(diào)用一次
最終的效果：
時(shí)間是17:34偷崩，這個(gè)gif效果截的不好辟拷，請(qǐng)?jiān)彛x謝觀看阐斜。
