小小时钟带给我大大的思考-制作个时钟插件
Posted 怪诞咖啡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小小时钟带给我大大的思考-制作个时钟插件相关的知识，希望对你有一定的参考价值。
【来源】由于自己非计算机出身，所以对于底层的一些常识的认识不够；近期开始自修《网易云课堂》的大学四年计算机，碰到了一个通过三角函数计算角度的问题；为了让自己重温三角函数知识，引出了之后一些列的实践和思考，而且最后我用的非三角函数知识；
【思考】对于时钟这种插件，《慕课网》上有很多讲解，也看了一些，怎么说呢，对于我这种好久动不动摇三角函数的同学来说，确实需要一些时间；实践才是检验真理的王道，因此，我直接开战
【遇到的问题】对于CSS的运用这里就不说了，后面有完整的代码；就说说实际遇到的问题吧，我自己的思路是通过，获取当前系统，hour/minute/second来显示时针、分针、秒针的，最后遇到的问题就是，角度都是整数，也就是说：现在如果是3：30，时针的指向还是3的位置，而不是3下面的位置；最初我也很苦恼，观看教程，发现思路完全不一样，教程的思路是通过三角函数来计算角度，而我是通过数值来计算角度，完全没有可借鉴性；
这可怎么办，溜达溜达，重点不在于我用的是什么知识，重点在于角度的计算没有引入小数；
好了到这思路通了，然后就是把分钟转化成小时的小数（秒在小时的面前忽略不计），秒数转化成分钟的小数，毫秒计算秒数的小数（这块除以999，因为毫秒最大值999）
【今天的获得】这次之所以写下来，是由于我想把在大脑中悬着的感悟，使其落地；让我受益终身；
最初就是认为这事只能用三角函数来计算，最终自己的思路才发现，其实解决问题的办法很多，但从自身的角度来看待问题，我们首先要做的就是用自己最擅长的能力去解决，这样做是为了让自己不惧怕任何问题；
同时，我们也要不断的学习，这样做是为了我们解决问题的思路和角度不断的得到优化；
还有就是不因为提前知道答案而影响自己的思路（这个叫做沉没成本）
【好了上代码，估计感悟差不多落地了】
【注】这个是基于jQuery的所以需要引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> body{background:black;} .box{width:400px;height:400px;background:rgba(255,255,255,.2);margin:100px auto;position:relative;border-radius:50%;box-shadow:0 0 0 20px rgba(255,255,255,.2);} .outer .item{width:2px;height:200px;transform-origin:bottom center;color:#fff;position:absolute;bottom:200px;left:200px;margin-left:-1px;} .outer .item::before{content:‘‘;width:2px;height:12px;background:#fff;position:absolute;top:-12px;right:0;} .outer .item span{display:block;width:20px;text-align:center;margin-left:-9px;font-size:14px;color:rgba(255,255,255,.6);} .inner .item{width:2px;height:200px;transform-origin:bottom center;color:#fff;position:absolute;bottom:200px;left:200px;margin-left:-1px;} .inner .item::before{content:‘‘;width:2px;height:6px;background:rgba(255,255,255,.4);position:absolute;top:-12px;right:0;} .hour{display:none;width:4px;height:100px;transform-origin:bottom center;color:#fff;position:absolute;bottom:200px;left:200px;background:rgba(255,0,255,.6);margin-left:-2px;border-radius:50% 50% 4px 4px;} .minuter{display:none;width:3px;height:140px;transform-origin:bottom center;color:#fff;position:absolute;bottom:200px;left:200px;background:rgba(255,0,0,.6);margin-left:-1.5px;border-radius:50% 50% 2px 2px;} .second{display:none;width:2px;height:180px;transform-origin:bottom center;color:#fff;position:absolute;bottom:200px;left:200px;background:rgba(255,255,0,.6);margin-left:-1px;border-radius:50% 50% 2px 2px;} </style> <div class="box"> <div class="outer"></div> <div class="inner"></div> <div class="needle"> <div class="hour"></div> <div class="minuter"></div> <div class="second"></div> </div> </div> <script src="jq.js"></script> <script> $(function(){ // 刻度初始化 pointerNum(); // 时钟初始化 time(); // 指针转动 setInterval(function(){ time(); },20); // 刻度 function pointerNum(){ // 整点指示点 var sum = 360/12; var res = ‘‘; for(var i=1;i<13;i++){ res += ‘<div class="item" style="transform:rotate(‘+sum*i+‘deg);"><span style="transform:rotate(-‘+sum*i+‘deg);">‘+i+‘</span></div>‘; } $(‘.outer‘).html(res); // 指示点 var inner_sum = 360/60; var inner_res = ‘‘; for(var i=0;i<60;i++){ inner_res += ‘<div class="item" style="transform:rotate(‘+inner_sum*i+‘deg);"></div>‘; } $(‘.inner‘).html(inner_res); } // 时分秒指针 function time(){ var sum = 360/12; var inner_sum = 360/60; var date = new Date(); var hour = date.getHours(); var minuter = date.getMinutes(); var second = date.getSeconds(); var millisecond = date.getMilliseconds()/999; document.title = evenFn(hour)+‘:‘+evenFn(minuter)+‘:‘+evenFn(second); $(‘.hour‘).css(‘transform‘,‘rotate(‘+(hour+minuter/60)*sum+‘deg)‘).show(); $(‘.minuter‘).css(‘transform‘,‘rotate(‘+(minuter+second/60)*inner_sum+‘deg)‘).show(); $(‘.second‘).css(‘transform‘,‘rotate(‘+(second+millisecond)*inner_sum+‘deg)‘).show(); } // 双数显示 function evenFn(n){ return n<10?‘0‘+n:‘‘+n; } }); </script> </body> </html>
【对自己说】一直以为自己能力还不够，还没资格写博客，其实写了这么多，完全就是为了让自己更好的学会想学的知识，然后更好的记忆下来
以上是关于小小时钟带给我大大的思考-制作个时钟插件的主要内容，如果未能解决你的问题，请参考以下文章