首页 > 代码库 > 小小时钟带给我大大的思考-制作个时钟插件

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

2024-11-06 11:34:40   208人阅读

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

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

【遇到的问题】对于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>

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

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


联系
我们