第十二题小demo-刻度时钟案例

最新推荐文章于 2024-09-25 16:29:08 发布

小黑子史蒂夫

最新推荐文章于 2024-09-25 16:29:08 发布

阅读量101

点赞数

分类专栏：前端三剑客小demo 文章标签： css css3 前端

本文链接：https://blog.csdn.net/VanWot/article/details/128724453

版权

前端三剑客小demo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该文章介绍了一个使用HTML、CSS和JavaScript实现的实时刻度时钟和电子时钟。通过Date对象获取当前时间，并利用CSS的transform:rotate属性动态调整指针的角度。同时，使用定时器每秒更新时间，确保与北京时间保持同步。HTML结构包含刻度、指针和电子时间显示，CSS用于样式设计，JavaScript负责逻辑处理。

摘要由CSDN通过智能技术生成

小黑子的刻度时钟案例

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

实现原理：

使用Date获取实时时间，设置八个指针,做for循环i代表了顺时针方向的指针，每次循环都创建一个以div为中心，利用transform：rotate属性来画指针。
使用定时器设置秒，分，时针的旋转角度，每秒钟执行一次。
电子时钟同样利用绑定定时器，利用条件运算符，拼接字符串，利用${}输出带有html格式的内容

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="./刻度时钟css.css">
    <script src="./刻度时钟js.js"></script>
</head>
<body>
    <div class="main">
        <div id="clock">
            <div class="number">12</div>
            <div class="number">3</div>
            <div class="number">6</div>
            <div class="number">9</div>
        </div>
        <div id="circle"></div>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="second"></div>
    </div>
    <div id="box">
        <div id="time"></div>
    </div>
</body>
</html>

css部分：

*{
    margin: 0;
    padding: 0;
}

body{
    width: 100vw;
    height: 100vh;
}

.main{
    top: 20px;
    position: relative;
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
    border-radius: 50%;
    border: 1px solid gray;
    margin: 0 auto;
    /* 加个阴影 */
    box-shadow: 0 0 10px antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}

#clock{
    width: 270px;
    height: 270px;
    /* background-color: gold; */
    border-radius: 50%;
    /* 加个阴影 */
    /* box-shadow: 0 0 10px gold; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main #clock .number{
    position: absolute;
    color: black;
    font-size: 30px;
    font-weight: 700;
}

.number:nth-child(1){
    top: -6px;
}

.number:nth-child(2){
    right: -1px;
}
.number:nth-child(3){
    bottom: -6px;
}
.number:nth-child(4){
    left: -1px;
}

.aa{
    position: absolute;
    top: 0;
    width: 5px;
    height: 20px;
    background-color: black;
    transform-origin: center 150px;
}

.main #circle{
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: rgb(0,0,0);
    border-radius: 50%;
}
.main #hour{
    top: 50%;
    width: 6px;
    height: 70px;
    position: absolute;
    background-color: rgb(0,0,0);
    border-radius: 50%;
    transform: translateY(-100%) rotate(5deg);
    /* 设置参考点，以下方为中心旋转 */
    transform-origin: center bottom;
}
.main #min{
    top: 50%;
    width: 10px;
    height: 100px;
    position: absolute;
    background-color: red;
    border-radius: 50%;
    transform: translateY(-100%);
    transform-origin: center bottom;
}
.main #second{
    top: 50%;
    width: 5px;
    height: 130px;
    position: absolute;
    background-color: skyblue;
    border-radius: 50%;
    transform: translateY(-100%);
    transform-origin: center bottom;
}

#box{
    margin: 0 auto;
    width: 300px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#box #time{
    font-size: 40px;
}

js部分：

window.onload = function() {
    let clock = document.querySelector("#clock");
    let hour = document.querySelector("#hour");
    let min = document.querySelector("#min");
    let second = document.querySelector("#second");

    //设置八个指针,做for循环i代表了顺时针方向的指针
    for(let i=1;i<9;i++){ 
        //一个表盘的每个间隔：360deg/（8个指针+4个数字）=30deg
        oh = document.createElement('div');//每次循环都创建一个以div为中心来画指针
        oh.className = 'aa';
        if(i<3)
        {//第1、2指针旋转角度是30deg*1、30*2
            oh.style.transform = 'rotate('+30*i+'deg)';
        }
        else if(i<5&&i>=3)
        {//因为中间指针跳过了数字,所以第3、4指针旋转角度是30deg*(3+1)、30*(4+1)
            oh.style.transform = 'rotate('+30*(i+1)+'deg)';
        }
        else if(i<7&&i>=5)
        {//因为中间指针跳过了数字,所以第5、6指针旋转角度是30deg*(5+2)、30*(6+2)
            oh.style.transform = 'rotate('+30*(i+2)+'deg)';
        }
        else
        {//因为中间指针跳过了数字,所以第7、8指针旋转角度是30deg*(7+3)、30*(8+3)
            oh.style.transform = 'rotate('+30*(i+3)+'deg)';
        }
        clock.appendChild(oh)//将oh循环完成的效果返回clock中

    }

    //设置上方时钟跑动
    let run = ()=>{
        //获取当前时间
        let oDate = new Date( );
        let nowH = oDate.getHours( );
        let nowM = oDate.getMinutes();
        let nowS = oDate.getSeconds();
        
        if(nowH>12)//用24小时制
        {//超过12h，比如23点，可以用23/12=11，获得晚上的时间，再让该时间*30deg旋转
            hour.style.transform = "translateY(-100%) rotate("+30*(nowH%12)+"deg)";
        }
        else
        {
            hour.style.transform = "translateY(-100%) rotate("+30*nowH+"deg)";
        }
        //秒针和分针都是转360deg，所以360/60=6deg，用来乘以当前时间
        min.style.transform = "translateY(-100%) rotate("+6*nowM+"deg)";
        second.style.transform = "translateY(-100%) rotate("+6*nowS+"deg)";
    }
    run();//先调用让函数正常运行，不受刷新影响
    setInterval(run,1000);

    //设置下方电子时钟
    let getTime = function() {
        let date = new Date();
        let hour = date.getHours() < 10 ? '0' : date.getHours();
        let min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        let sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        let time = `${hour}:${min}:${sec}`;
        //&{}里的内容按照html格式输出
        document.getElementById("time").innerHTML = time
    }
    setInterval(function(){
        getTime()
    }, 1000)
}