变换之时钟实现
為了更好的利用學(xué)過的知識(shí)，扎實(shí)一下知識(shí)，也方便日后的復(fù)習(xí)，則需要做一些東西熱身熱身一下
以下是實(shí)現(xiàn)的代碼：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;border: 1px solid black;border-radius: 50%;}#list > li{position: absolute;list-style: none;background: black;left: 99px;top: 0px;width: 2px;height: 8px;transform-origin: center 100px;}#list > li:nth-child(5n+1){height: 12px;}.licon{position: absolute;width: 20px;height: 20px;background: pink;border-radius: 50%;left: 90px;top: 90px;}.hour{width: 6px;height: 30px;background: black;position: absolute;left:96px ;top: 70px;transform-origin: center bottom;}.min{width: 4px;height: 50px;position: absolute;background: black;left: 98px;top: 50px;transform-origin: center bottom;}.sec{width: 2px;height: 70px;position: absolute;left: 99px;top: 30px;background: red;transform-origin: center bottom;}</style></head><body><div id="wrap"><ul id="list"></ul><div class="hour"></div><div class="min"></div><div class="sec"></div><div class="licon"></div></div></body><script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">$(function(){var $listNode = $("#list");var $headNode = $("head>style");var hours = $(".hour");var mins = $(".min");var secs = $(".sec");var licons = $(".licon");for (var i =0 ; i < 60; i++){$listNode.append("<li></li>")$headNode.append("#list > li:nth-of-type("+(i+1)+"){transform: rotate("+(i*6)+"deg);}")}//這樣子提前運(yùn)行是因?yàn)椴挥么蜷_一秒后再閃退，所以還是這樣子比較好，不會(huì)影響視覺。move()setInterval(move,1000)function move(){console.log('aaa')var date = new Date()var sec = date.getSeconds()var min = date.getMinutes()+sec/60var hour = date.getHours()+min/60secs.css("transform","rotate("+(30*sec)+"deg)")mins.css("transform","rotate("+(6*min)+"deg)")hours.css("transform","rotate("+(30*hour)+"deg)")}})</script> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/caicaihong/p/9628564.html
總結(jié)
- 上一篇： 邹博机器学习代码分析(1)-线性回归
- 下一篇： 机器学习——人工神经网络之后向传播算法（