js实现时钟Clock

最新推荐文章于 2023-01-15 17:32:44 发布

HGQ_Boy

最新推荐文章于 2023-01-15 17:32:44 发布

阅读量3k

点赞数 1

分类专栏： js 前端文章标签： js Clock css html 前端

本文链接：https://blog.youkuaiyun.com/HGQ_Boy/article/details/79806471

版权

js 同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个动态时钟。通过获取当前时间并转换为角度，结合CSS和HTML，创建出实时更新的时钟效果。文章提供js、css和html的源代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js实现时钟Clock

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%;
    font-size: 1.6em;
}
.nine {
    position: absolute;
    top: 45%;
    left: 3%;
}
.ten {
    position: absolute;
    top: 25.5%;
    left: 9.3%;
}
.eleven {
    position: absolute;
    top: 9.3%;
    left: 24.5%;
}
.twelve {
    position: absolute;
    top: 3%;
    left: 45%;
}
.one {
    position: absolute;
    top: 9.3%;
    right: 23.2%;
}
.two {
    position: absolute;
    top: 25.5%;
    right: 7.3%;

}
.three {
    position: absolute;
    top: 45%;
    right: -2%;
}
.four {
    position: absolute;
    bottom: 25.5%;
    right: 7.3%; 
}
.five {
    position: absolute;
    bottom: 9.3%;
    right: 22.2%;
}
.six {
    position: absolute;
    bottom: 3%;
    right: 42.5%;
}
.seven {
    position: absolute;
    bottom: 9.3%;
    left: 26.5%;
}
.eight {
    position: absolute;
    bottom: 25.5%;
    left: 12.5%;
}

.word {
    position: absolute;
    top: 60%;
    left: 30%;
    height: 10%;
    width: 40%;
    font-size: 0.6em;
    font-family: cursive;
    text-align: center;
}

.point {
    position: absolute;
    top: 48%;
    left: 48%;
    width: 4%;
    height: 4%;
    background-color: black;
    border-radius: 4em;
}
.hour {
    position: absolute;
    top: 20%;
    left: 48.5%;
    width: 3%;
    height: 30%;
    background-color: #888;
    border-radius: 25px;
    transform-origin: center bottom;
/*  transform: rotate(-90deg);*/
}
.minute {
    position: absolute;
    top: 10%;
    left: 49%;
    width: 2%;
    height: 40%;
    background-color: #555;
    border-radius: 25px;
    transform-origin: center bottom;
/*  transform: rotate(-90deg);*/
}
.second {
    position: absolute;
    top: 4%;
    left: 49.5%;
    width: 1%;
    height: 46%;
    background-color: rgb(200,100,100);
    border-radius: 25px;
    transform-origin: center bottom;
/*  transition: all 1s linear;
    transform: rotate(0deg);*/
}

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/clock.css">

    <title>Clock</title>
</head>
<body>

    <audio autoplay="autoplay" loop>
        <source src="miao.mp3" type="audio/mpeg">
    </audio>

    <div class="outring">
        <div class="clock">
            <div class="number">
                <span class="nine">9</span>
                <span class="ten">10</span>
                <span class="eleven">11</span>
                <span class="twelve">12</span>
                <span class="one">1</span>
                <span class="two">2</span>
                <span class="three">3</span>
                <span class="four">4</span>
                <span class="five">5</span>
                <span class="six">6</span>
                <span class="seven">7</span>
                <span class="eight">8</span>
            </div>
            <div class="word">Design By Qun</div>
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
            <div class="point"></div>
        </div>
    </div>


    <script type="text/javascript" src="js/clock.js"></script>
</body>
</html>