星空网 > 软件开发 > Java

小小时钟带给我大大的思考

【来源】由于自己非计算机出身,所以对于底层的一些常识的认识不够;近期开始自修《网易云课堂》的大学四年计算机,碰到了一个通过三角函数计算角度的问题;为了让自己重温三角函数知识,引出了之后一些列的实践和思考,而且最后我用的非三角函数知识;

【思考】对于时钟这种插件,《慕课网》上有很多讲解,也看了一些,怎么说呢,对于我这种好久动不动摇三角函数的同学来说,确实需要一些时间;实践才是检验真理的王道,因此,我直接开战

【遇到的问题】对于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='/images/loading.gif' data-original="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 background-color: #f5f5f5; color: #000000">'+sum*i+'deg);"><span background-color: #f5f5f5; color: #000000">'+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 background-color: #f5f5f5; color: #000000">'+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>

【对自己说】一直以为自己能力还不够,还没资格写博客,其实写了这么多,完全就是为了让自己更好的学会想学的知识,然后更好的记忆下来




原标题:小小时钟带给我大大的思考

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流