js实现时钟Clock

js实现时钟Clock

目录

思路

本着忐忑的心，写下自己在闲时利用js写的一个时钟。

• Date( ) 获取当前时间
• getHours( ) 获取当前时
• getMinutes( ) 获取当前分
• getSeconds( ) 获取当前秒
• oHours = (hour + min/60) * 30 将时转换为角度
• oMin = (min + sec/60) * 6 将分转换为角度
• oSec = sec * 6 将秒转换为角度
• 函数 draw(dom, angle) 画出指针

---

源代码

下面就是利用js实现时钟Clock的源代码：

js部分

function frame() {
   
    var date = new Date();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var oHours = (hour + min/60) * 30;
    var oMin = (min + sec/60) * 6;
    var oSec = sec * 6;

    var $sec = document.getElementsByClassName('second')[0];
    var $min = document.getElementsByClassName('minute')[0];
    var $hour = document.getElementsByClassName('hour')[0];

    function draw(dom, angle) {
   
        dom.style.transform = 'rotate(' + angle + 'deg)';   
    }

    draw($hour, oHours);
    draw($min, oMin);
    draw($sec, oSec);

}
frame();
var timer = setInterval(frame, 1000);

css部分

* {
    padding: 0;
    margin: 0;
}
html {
    font-size: 16px;
}
body {
    font-size: 100%;
}

.outring {
    position: relative;
    margin: 2em auto;
    width: 20em;
    height: 20em;
    border: 8px solid #888;
    border-radius: 20em;
}

.number span {
    width: 10%;
    height: 10%<