电子和简易刻度时钟

原创已于 2023-01-14 17:30:46 修改 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2023-01-14 17:29:41 首次发布

该代码示例展示了一个使用HTML、CSS和JavaScript编写的页面，包含一个上方为刻度时钟，下方为电子时钟的设计。通过JavaScript的定时器功能，时钟能够实时更新，保持与北京时间同步。刻度时钟通过旋转li元素模拟指针，电子时钟则动态更新span标签的内容来显示时间。

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

原理：

html部分：分成两块，上面是刻度时钟，下面是电子时钟
在这里插入图片描述
css部分：对时钟的定位和样式的添加

js部分：先通过js添加li标签，再定义一个函数对时分秒针进行赋值最后设定定时器一直执行。电子时钟：通过定时器对span标签内容进行赋值

完整代码：

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        ul{
            list-style: none;
        }
        .timeclock{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 4px solid black;
            margin: 0 auto;
            position: relative;
        }
        .timeclock ul{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .timeclock ul li{
            width: 3px;
            height: 7px;
            background: black;
            position: absolute;
            left: 50%;
            top: 0;
            transform-origin: center 101px;
        }
        #hour{
            width: 4px;
            height: 40px;
            background: rgb(234, 0, 255);
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -40px 0 0 -2px;
            transform-origin: center bottom;
        }
        #minute{
            width: 3px;
            height: 60px;
            background: yellowgreen;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -60px 0 0 -1.5px;
            transform-origin: center bottom;
        }
        #second{
            width: 2px;
            height: 80px;
            background: aquamarine;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -80px 0 0 -1px;
            transform-origin: center bottom;
        }
        #bot{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: black;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .tclock{
            height: 40px;
            width: 260px;
            border: 2px solid aqua;
            margin: 0 auto;
            margin-top: 30px;
        }
       #etime{
       font-size: 30px;
       margin-left: 66px;
       }
    </style>
</head>
<body>
    <div class="timeclock">
        <ul>
            <li></li>
        </ul>

        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
        <div id="bot"></div>
    </div>
    <div class="tclock">
        <span id="etime"></span>
    </div>
    <script>
        var ul=document.querySelector("ul")
        for(var i=0;i<60;i++){
            var li=document.createElement("li");
            li.style.transform='rotate('+i*6+'deg)';
            if(i%5==0){
                li.style.height='15px'
            }
            ul.appendChild(li);
        }
        function begin1(){
            var date=new Date();
            var oh=date.getHours();
            var om=date.getMinutes(); 
            var os=date.getSeconds();
            
            hour.style.transform='rotate('+(oh*30+om/2)+'deg)';
            minute.style.transform='rotate('+om*6+'deg)';
            second.style.transform='rotate('+os*6+'deg)';
        }
        begin1()
        setInterval(begin1,1000);//刻度时钟
        
        setInterval(function(){
            var etime=document.getElementById("etime");
            var date1=new Date();
            var oh1=date1.getHours();
            var om1=date1.getMinutes(); 
            var os1=date1.getSeconds();
            etime.innerHTML=oh1+':'+om1+":"+os1
        },1000)//电子时钟
            
    </script>
</body>
</html>