小小時鐘帶給我大大的思考-制作個時鐘插件
【來源】由於自己非計算機出身，所以對於底層的一些常識的認識不夠；近期開始自修《網易雲課堂》的大學四年計算機，碰到了一個通過三角函數計算角度的問題；為了讓自己重溫三角函數知識，引出了之後一些列的實踐和思考，而且最後我用的非三角函數知識；
【思考】對於時鐘這種插件，《慕課網》上有很多講解，也看了一些，怎麽說呢，對於我這種好久動不動搖三角函數的同學來說，確實需要一些時間；實踐才是檢驗真理的王道，因此，我直接開戰
【遇到的問題】對於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>
【對自己說】一直以為自己能力還不夠，還沒資格寫博客，其實寫了這麽多，完全就是為了讓自己更好的學會想學的知識，然後更好的記憶下來
小小時鐘帶給我大大的思考-制作個時鐘插件