JS实现简易时钟

最新推荐文章于 2024-01-31 16:02:42 发布

aaa小葵

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量2.1k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_74033027/article/details/128695375

版权

需求：

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

原理：

上面的时钟，利用循环创建60个li标签，分别利用不同的偏转来实现在不同的位置上，再创建三个li标签设置宽度和高度来充当指针，将指针放入定时器中，每隔一秒转移一步

下面的时钟直接获得现在的时间就可以完成

效果图：

时钟

代码块：

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .clock{
            margin: 0 auto;
            position: relative;
            width: 300px;
            height: 300px;
            background-color: rgb(255, 255, 255);
            border: 5px solid rgb(0, 0, 0);
            border-radius: 50%;
        }
        .clock ul{
            width: 100%;
            height: 100%;
        }
        .clock ul li{
            position: absolute;
            left: 49%;
            top: 0px;
            width: 3px;
            height: 8px;
            border-radius: 50%;
            background-color: black;
            /* transform: rotate(6deg); */
            transform-origin: center 150px;
        }
        .hour{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -60px 0 0 -2px;
            width: 3px;
            height: 65px;
            background-color: black;
            transform-origin: center bottom;
            }
        .minu{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -80px 0 0 -3px;
            width: 3px;
            height: 85px;
            background-color: black;
            transform-origin: center bottom;
        }
        .second{
            position: absolute;
            left: 50%;
            top: 50%;
            width: 1px;
            height: 105px;
            margin: -98px 0 0 -3px;
            background-color: black;
            transform-origin: center bottom;
        }
        .box{
            margin: 50px 0 0 695px;
            width: 400px;
            display: flex;
            font-size: 32px;
            font-weight: bolder;
        }
        .hourbox,.minubox,.secondsbox{
            margin: 10px;
            padding: 10px;
            color: #fff;
            background-color: black;
            border-radius: 20px
        }
    </style>

<body>
    <div class="clock">
        <ul>
        </ul>
        <div class="hour"></div>
        <div class="minu"></div>
        <div class="second"></div>
    </div>
    <div class="box">
        <div class="hourbox"></div>
        <div class="minubox"></div>
        <div class="secondsbox"></div>
    </div>
</body>

window.onload=function(){
    var ul = document.querySelector("ul")
    for(let i=0;i<60;i++) {
        var li = document.createElement("li")
        ul.appendChild(li)
        li.style.transform='rotate('+(i)*6+'deg)'
        if (i%5==0) {
            li.style.height=18+"px"
        }
    }
    var hour=document.querySelector(".hour")
    var minu=document.querySelector(".minu")
    var second=document.querySelector(".second")
    var timer1 = setInterval(function(){
        var date = new Date()
        var newHour = date.getHours()
        var newMinu = date.getMinutes()
        var newSecond = date.getSeconds()
        hour.style.transform = 'rotate('+(newHour)*30+'deg)'
        minu.style.transform = 'rotate('+(newMinu)*6+'deg)'
        second.style.transform = 'rotate('+(newSecond)*6+'deg)'
    },1000)

    var now = {}
    var box = document.querySelector(".box")
    var box1 = document.querySelector(".hourbox")
    var box2 = document.querySelector(".minubox")
    var box3 = document.querySelector(".secondsbox")
    setInterval(function(){
        var date = new Date()//这个now是定义在回调函数内部，作用域只有回调函数内
        var nhour = date.getHours()
        var nminu = date.getMinutes()
        var nsecond = date.getSeconds()
        box1.innerHTML=`${nhour}时`
        box2.innerHTML=`${nminu}分`
        box3.innerHTML=`${nsecond}秒`
    },1000)
}

aaa小葵

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JS实现简易时钟

上面的时钟，利用循环创建60个li标签，分别利用不同的偏转来实现在不同的位置上，再创建三个li标签设置宽度和高度来充当指针，将指针放入定时器中，每隔一秒转移一步。上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时间实时对应。下面的时钟直接获得现在的时间就可以完成。
复制链接

扫一扫