JavaScript 实现刻度时钟

最新推荐文章于 2023-08-16 14:59:39 发布

O_oregou

最新推荐文章于 2023-08-16 14:59:39 发布

阅读量891

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/O_osange/article/details/128716847

版权

效果要求

下方是简易的刻度时钟，上方是电子时钟，上下的时间需与北京时间实时对应。

实现原理

利用css的transform-origin和transform: rotate( )设置每个刻度的位置

再使用var now = new Date()获取现在的时间，用getHours()获取小时数，用getMinutes()获取分钟数，用getSeconds()获取秒钟数

在设置循环计时器，改变每秒钟的时分秒的指向

代码展示：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="circle">
        <span class="dian"></span>
        <ul class="scale">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
        <div class="time">
            北京时间<span class="s1"></span>:<span class="s2"></span>:<span class="s3"></span>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.clear:before,.clear:after{
    content: " ";
    display: block;
    clear: both;
}


.circle{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: wheat;
    margin-top: 100px;

    border-radius: 50%;
    border: 10px solid rgb(243, 214, 161);
    position: relative;
}

.dian{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;

    position: absolute;
    z-index: 10;
    top: calc(50% - 5px);
    left: calc(50% - 4px);
}

.scale li{
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: black;

    transform-origin: center 50px;
    position: absolute;
    top: 0;
    left: 50%;
}
.scale li:nth-child(1){
    transform: rotate(0);
}
.scale li:nth-child(2){
    transform: rotate(30deg);
}
.scale li:nth-child(3){
    transform: rotate(60deg);
}
.scale li:nth-child(4){
    transform: rotate(90deg);
}
.scale li:nth-child(5){
    transform: rotate(120deg);
}
.scale li:nth-child(6){
    transform: rotate(150deg);
}
.scale li:nth-child(7){
    transform: rotate(180deg);
}
.scale li:nth-child(8){
    transform: rotate(210deg);
}
.scale li:nth-child(9){
    transform: rotate(240deg);
}
.scale li:nth-child(10){
    transform: rotate(270deg);
}
.scale li:nth-child(11){
    transform: rotate(300deg);
}
.scale li:nth-child(12){
    transform: rotate(330deg);
}

.hour,.min,.sec{
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;

    position: absolute;
    z-index: 5;
    top: calc(50% - 3px);
    left: calc(50% - 2px);
}
.hour{
    z-index: 9;
}
.min{
    z-index: 8;
}
.sec{
    z-index: 7;
}

.hour::after{
    content: "";
    display: block;
    width: 4px;
    height: 15px;
    background-color: gray;
    border-radius: 2px 2px 0 0;

    position: absolute;
    top: -15px;
    left: 1px;

}
.min::after{
    content: "";
    display: block;
    width: 4px;
    height: 25px;
    background-color: black;
    border-radius: 2px 2px 0 0;

    position: absolute;
    top: -25px;
    left: 1px;
}
.sec::after{
    content: "";
    display: block;
    width: 2px;
    height: 35px;
    background-color: red;
    border-radius: 2px 2px 0 0;

    position: absolute;
    top: -35px;
    left: 2px;
}

.time{
    position: absolute;
    top: -55px;
    left: 17px;
}

js

window.onload = function () {
    // 获取元素节点
    var hour = document.getElementsByClassName("hour")[0]
    var min = document.getElementsByClassName("min")[0]
    var sec = document.getElementsByClassName("sec")[0]
    var s1 = document.getElementsByClassName("s1")[0]
    var s2 = document.getElementsByClassName("s2")[0]
    var s3 = document.getElementsByClassName("s3")[0]

    // 创建时间节点
    var now = new Date()
    var h = now.getHours()
    var m = now.getMinutes()
    var s = now.getSeconds()
    // 设置页面打开时候的时间指向
    sec.style.transform = "rotate( " + (s * 6) + "deg)"
    min.style.transform = "rotate( " + (m * 60 + s) / 10 + "deg)"
    hour.style.transform = "rotate( " + ((h % 12) * 60 + m) / 2 + "deg)"

    // 判断时分秒的大小是否大于10，如果小于10则在数字前面+0
    if(h<10){
        s1.innerHTML = "0"+h+""
    }else{
        s1.innerHTML = h+""
    }
    if(m<10){
        s2.innerHTML = "0"+m+""
    }else{
        s2.innerHTML = m+""
    }
    if(s<10){
        s3.innerHTML = "0"+s+""
    }else{
        s3.innerHTML = s+""
    }

    // 设置一个循环计时器，改变每秒钟的时分秒指向
    var clockTime = setInterval(function () {
        var now = new Date()
        var h = now.getHours()
        var m = now.getMinutes()
        var s = now.getSeconds()

        sec.style.transform = "rotate( " + (s * 6) + "deg)"
        min.style.transform = "rotate( " + (m * 60 + s) / 10 + "deg)"
        hour.style.transform = "rotate( " + ((h % 12) * 60 + m) / 2 + "deg)"

        if(h<10){
            s1.innerHTML = "0"+h+""
        }else{
            s1.innerHTML = h+""
        }
        if(m<10){
            s2.innerHTML = "0"+m+""
        }else{
            s2.innerHTML = m+""
        }
        if(s<10){
            s3.innerHTML = "0"+s+""
        }else{
            s3.innerHTML = s+""
        }
    }, 1000)
}