JS运用Date做的欧式钟表

最新推荐文章于 2020-08-01 17:39:22 发布

莓莓儿～

最新推荐文章于 2020-08-01 17:39:22 发布

阅读量225

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/fanfan_h/article/details/90664208

版权

JS 专栏收录该内容

49 篇文章 9 订阅

订阅专栏

这个钟表主要考验对时分秒的计算，以及各个指针选件角度的计算。

获取当前时间（new Date（））
获取到1900年的总毫秒数alltime （getTime(））
求出现在的时分秒
（1）此刻的秒数：(alltime/1000)%60 （1s =1000ms）
（2）此刻的分钟数：(alltime/1000/60)%60
（3）此刻的小时数：(alltime/1000/60/60)%24+8 （加 8
是因为中国时间从早上8点开始算起）
设置一个大模块放置钟表
设置三个小块放置时分秒指针，调整好每个指针的尾部都在钟表的中心位置，设置相同的旋转中心（结合position 和 background-position）
求出各个指针旋转度数，
（1）时针旋转度数为此刻小时(h*30-90)度，减去90度是因为初始三个指针的位置指向3点，距离12点多偏移了90度。
（2）分针旋转度数为此刻分钟(m*6-90)度
（3）秒针旋转度数为此刻分钟(s*6-90)度
使用间歇调用 setInterval (function(){ }，1000），让各个指针
每秒旋转，成为一个真实的钟表。

效果如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>欧式钟表</title>
    <style>
        #clock {
            margin:auto;
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            width:500px;
            height:500px;
            border-radius: 50%;
            border:1px solid black;
            background: url(./img/bgimage.png );
            background-size: 1500px;
            background-position: -616px 1084px;

        }
        #hour{
            transform-origin: 15px 35px;
            position: absolute;
            top:0;
            left:160px;
            bottom:0;
            right:0;
            width:200px;
            height:70px;
            /*border:1px solid red;*/
            margin:auto;
            background: url(./img/bgimage.png );
            background-size: 1500px;
            background-position: -1241px 898px;
        }
        #minute{
            transform-origin: 15px 35px;
            position: absolute;
            top:0;
            left:211px;
            bottom:0;
            right:0;
            width:250px;
            height:70px;
            /*border:1px solid red;*/
            margin:auto;
            background: url(./img/bgimage.png );
            background-size: 1500px;
            background-position: -1241px 827px;
        }
        #scend{
            transform-origin: 25px 35px;
            position: absolute;
            top:0;
            left:193px;
            bottom:0;
            right:0;
            width:250px;
            height:70px;
            /*border:1px solid red;*/
            margin:auto;
            background: url(./img/bgimage.png );
            background-size: 1500px;
            background-position: -1256px 1913px;
        }
    </style>
</head>
<body>
<div id="clock">
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="scend"></div>
</div>
<script>
    //过程；
    /*
    * 获取当前时间
    * 获取到1900年的总毫秒数
    * 求出现在的时 分 秒
    * 求出各个指针旋转度数*/
    var hour=document.getElementById("hour");
    var minute=document.getElementById("minute");
    var scend=document.getElementById("scend");
  setInterval (function(){
      var timenow=new Date();
      var alltime=timenow.getTime();  //总毫秒
      var s=(alltime/1000)%60;  //秒
      var m=(alltime/1000/60)%60; //分
      var h=(alltime/1000/60/60)%24+8;  //时
      //console.log(h);
    hour.style.transform ="rotatez(" + (h*30-90) + "deg)";
    minute .style.transform ="rotatez(" + (m*6-90) + "deg)";
     scend.style.transform ="rotatez(" + (s*6-90) + "deg)";
  },1000)
</script>
</body>
</html>

现在时间是早上：7:01
在这里插入图片描述

莓莓儿～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS运用Date做的欧式钟表

这个钟表主要考验对时分秒的计算，以及各个指针选件角度的计算。获取当前时间（new Date（））获取到1900年的总毫秒数alltime （getTime(））求出现在的时分秒（1）此刻的秒数：(alltime/1000)%60 （1s =1000ms）（2）此刻的分钟数：(alltime/1000/60)%60（3）此刻的小时数：(alltime/1000/60/...
复制链接

扫一扫