小小时钟带给我大大的思考-制作个时钟插件

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>

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

以上是关于小小时钟带给我大大的思考-制作个时钟插件的主要内容,如果未能解决你的问题,请参考以下文章

用 JavaScript 制作实时时钟

如何利用iframe标签以及Javascript制作时钟?

如何用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟?

如何使用TSL2301并在usart中制作时钟延迟

WPF制作的小时钟