JavaScript + CSS Clock

2017-12-18 本文已影响2人 qfstudy

Clock实现思路

1. 首先在文档中写无个div标签，分别用来实现时钟的外形，时钟中心点，时针，分针，秒针。如下图所示：

1.png

2. 用css把时钟的外观，中心点展示出来。代码如下图所示。

2.png
3.png

3. 通过js实现时钟的刻度，并添加到时钟中。同时把时针分针，秒针的随时间变化而旋转的角度通过js实现。代码如下图所示。

4.png

4. 用css设计时针，分针，秒针的外观，并设置旋转的原点。
代码如下图所示

6.png
5.png

涉及到的特性

transform:主要是用来实现时针，分针，秒针，刻度的旋转角度
oSpan.style.transform = "rotate(" + i * 6 + "deg):是实现刻度的角度。
oHour[0].style.transform = "rotate(" + (oH * 30 + oM / 60 * 30) + "deg)"; oMin.style.transform = "rotate(" + (oM * 6 + oS / 60 * 6) + "deg)"; oSec.style.transform = "rotate(" + (oS * 6 + ms / 1000 * 6) + "deg)";
是实现时钟时针，分针，秒针随时间变化所需要选择的角度。

语法

transform:rotate()就是实现旋转具体语法参考:CSS变形、过渡和动画。在使用rotate属性的时候需要先设置元素旋转的原点。比如:transform-origin: center bottom;

需要解决的问题

元素与元素之间的位置，比如时钟的旋转原点需要设置在时钟的中心点。主要通过以下这几个属性实现。
width: 10px; height: 70px; margin-left: -5px; margin-top: -70px;
例子：

.44.png
.33.png

设置时钟的旋转角度：因为时钟圆盘一共有60个刻度，所以每隔一个刻度就是6度，那么一个小时，时针旋转30度，秒针旋转360度。

时针是（当前时间）6+分针/6030。一个小时内时针旋转的角度与分针旋转的角度的比例相等。分针，针跟时针是一样的原理。
oHour[0].style.transform = "rotate(" + (oH * 30 + oM / 60 * 30) + "deg)";

刻度的实现与添加到时钟圆盘上
- 用document.createElement生成一个元素，通过for循环生成60个刻度。
- 用appendChild()将生成的元素添加到文档中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
            border-radius: 50%;
            background: #655000;
            border: 2px black solid;
        }

        .cap, .hHand, .mHand, .hour, .min, .sec {
            position: absolute;
            left: 50%;
            background: black;
        }

        .cap, .hour, .min, .sec {
            top: 50%;
        }

        .cap {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #ff45;
            margin-left: -10px;
            margin-top: -10px;
        }

        .hHand {
            width: 6px;
            height: 18px;
            margin-left: -3px;
            transform-origin: center 150px;
        }

        .mHand {
            width: 4px;
            height: 10px;
            margin-left: -2px;
            transform-origin: center 150px;
        }

        #box span em {
            font-size: 20px;
            width: 40px;
            position: absolute;
            margin-top: 20px;
            left: 50%;
            margin-left: -20px;
            text-align: center;
            font-style: normal;
        }

        .hour, .min, .sec {
            border-radius: 70% 70% 0 0;
            transform-origin: center bottom;
        }

        .hour {
            width: 10px;
            height: 70px;
            margin-left: -5px;
            margin-top: -70px;
        }

        .min {
            width: 8px;
            height: 90px;
            margin-top: -90px;
            margin-left: -4px;
        }

        .sec {
            width: 4px;
            height: 110px;
            margin-left: -2px;
            margin-top: -110px;
        }

    </style>
</head>
<body>
<div id="box">
    <div class="cap"></div>
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
</div>
</body>
<script type="text/javascript">
    function time() {
        var oBox = document.getElementById("box");
        for (var i = 0; i < 60; i++) {
            var oSpan = document.createElement("span");
            if (i % 5 == 0) {
                oSpan.className = "hHand";
                var num = i / 5 == 0 ? 12 : i / 5;
                oSpan.innerHTML = "<em>" + num + "</em>";
                oSpan.children[0].style.transform = "rotate(" + i * (-6) + "deg)";
            } else {
                oSpan.className = "mHand";
            }
            oSpan.style.transform = "rotate(" + i * 6 + "deg)";
            oBox.appendChild(oSpan);
        }
    }

    time();
    //var oHour = document.querySelector(".hour");
    var oHour = document.getElementsByClassName("hour");
    //document.getElementsByClassName返回一个类数组集合->HTMLCollection->Object
    console.log(oHour);
    var oMin = document.querySelector(".min");
    var oSec = document.querySelector(".sec");

    function clock() {
        var date = new Date();
        var oH = date.getHours();
        var oM = date.getMinutes();
        var oS = date.getSeconds();
        var ms = date.getMilliseconds();
        oHour[0].style.transform = "rotate(" + (oH * 30 + oM / 60 * 30) + "deg)";
        oMin.style.transform = "rotate(" + (oM * 6 + oS / 60 * 6) + "deg)";
        oSec.style.transform = "rotate(" + (oS * 6 + ms / 1000 * 6) + "deg)";
    }
    clock();
    setInterval(clock, 100);
</script>
</html>

JavaScript + CSS Clock

Clock实现思路

猜你喜欢

热点阅读