刻度时钟和电子时钟

self_correction

已于 2023-01-11 18:45:14 修改

阅读量937

点赞数

于 2023-01-11 18:08:37 首次发布

本文链接：https://blog.csdn.net/self_correction/article/details/128648920

版权

刻度时钟和电子时钟

一、demo
- <1>.要求
- <2>.demo功能
二、实现原理
- <1>.刻度时钟
- <2>.电子时钟
三、代码
四、效果图展示
五、注意事项

一、demo

<1>.要求

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

<2>.demo功能

通过查看时间，实现时间管理

二、实现原理

思路：先将HTML和CSS部分确定，再去实现JS部分（除非有更好的JS实现方法，不然就使用HTML和CSS）。
由外入内，由浅入深。

先实现 刻度时钟 部分：
第一步：绘制好表盘；
第二步：定位好刻度（小刻度，大刻度）；
第三步：绘制时针，分针，秒针，圆点（同时实现定位）；
第四步：添加定时器。

再实现 电子时钟 部分：
第一步：设置好div块；
第二步：设置各个块的CSS样式；
第三步：获取当地时间。

<1>.刻度时钟

刻度时钟：
组成元素：表盘，小刻度，大刻度，时针，分针，秒针，圆点。

实现过程：
表盘通过HTML和CSS（主要是border-radius）实现；
小刻度通过CSS（主要是transform）以及JS（主要是for循环）实现；
大刻度通过JS(if语句)实现；
时针，分针，秒针，圆点通过HTML和CSS（主要是position和transform）实现；
JS主要实现定时器；

<2>.电子时钟

电子时钟
组成元素：小时，分钟，秒钟以及 “ ：”。
：是最好实现的部分，只需要通过HTML设置和添加CSS（主要是margin和width）样式即可;
小时，分钟，秒钟通过HTML和CSS（width和margin）以及JS（获取当地时间）。

三、代码

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">
    <link rel="stylesheet" href="./电子时钟.css">
</head>
<body>
    <!-- 刻度时钟部分 -->
    <!-- 
        思路：先定位好最简单的12点刻度，然后通过transform旋转，
        再定位其他刻度,总共60刻度，可通过JS的for循环去不断调整各个刻度的位置 
    -->
     <div class="time-clock"> <!-- 生产表盘 -->
        <ul>
            <!-- 
            <li></li>     这里发现提前生产刻度很难再进行JS方面的设置，
            <li></li>     不如先把li（刻度）设置好，然后再添加进html   
            <li></li>       
         -->
         <div id="hour"></div>    <!-- 生产时针 -->
         <div id="minu"></div>    <!-- 生产分针 -->
         <div id="second"></div>  <!-- 生产秒针 -->
         <div id="ball"></div>    <!-- 生产中间圆球 -->
        </ul>
    </div>
    <script src="./刻度时钟.js"></script>


<!-- 电子时钟部分 -->
   <div id="clock_2">
    <div class="box1" id="h_2"></div>
    <div class="box2">:</div>
    <div class="box1" id="m_2"></div>
    <div class="box2">:</div>
    <div class="box1" id="s_2"></div>

   </div> 



    <script src="./电子时钟.js"></script>
</body>
</html>

<1>.刻度时钟的Css部分

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

.time-clock{
    width: 300px;
    height: 300px;
    border: 4px solid #000;
    border-radius: 50%;
    margin: 100px auto;

}

/* 表盘 */
.time-clock ul{
    width: 100%;
    height: 100%;
    position: relative;
    /* 通过绝对定位和相对定位（子绝父相原则），来让刻度定位在表盘内测 */
}

.time-clock ul li{
    width: 2px;
    height: 8px;
    background-color: #000;
    position: absolute;
    left: 50%;
    /* 让12点刻度处于正上方 ,此处用%更适宜，因为刻度本身也有宽度，这样可以省去计算*/
    top: 0;
    transform-origin: center 150px;;
    /* 旋转此刻是以刻度的中心（50%处）旋转，将基准点调整为表盘中心旋转 */
}

/* .time-clock ul li:nth-child(2){
    transform: rotate(6deg);
}
.time-clock ul li:nth-child(3){
    transform: rotate(12deg);
} */
#hour{
    width: 6px;
    height: 50px;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin:-50px 0 0 -3px;
    /* 调整时针位置 */
    transform-origin:center bottom ;
    /* 调整旋转基点 */
}
#minu{
    width: 4px;
    height: 80px;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin:-80px 0 0 -2px;
    /* 调整分针位置 */
    transform-origin:center bottom ;
    /* 调整旋转基点 */
}
#second{
    width: 2px;
    height: 120px;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -120px 0 0 -1px;
    /* 调整秒针位置 */
    transform-origin:center bottom ;
    /* 调整旋转基点 */
}
#ball{
    width: 20px;
    height: 20px;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    /* 调整球的位置 */
}

<2>.刻度时钟的Js部分

var ul = document.querySelector("ul"); //获取ul标签
var hour = document.querySelector("#hour"); //获取时针
var minu = document.querySelector("#minu"); //获取分针
var second = document.querySelector("#second"); //获取秒针

for(var i=0;i<60;i++){      //循环60是因为有60个刻度
    var li = document.createElement("li"); //创建li标签
    li.style.transform = "rotate(" + i*6 + "deg)"; 
    // ul.appendChild(li);     //将已经设置好的刻度再添加进HTML
    //此刻，表盘和刻度基本解决的定位和数量的问题，接下来就是解决特殊刻度，可通过if语句，一旦i自增到5的倍数，就将长度变为更长（如18px），
    if(i%5==0){
        li.style.height = "18px";
    }
    ul.appendChild(li);
}

function run(){         //添加定时器
    var date = new Date();
    var iH = date.getHours();       //找到当地时间：小时
    var iM = date.getMinutes();     //找到当地时间：分钟
    var iS = date.getSeconds();     //找到当地时间：秒钟

    hour.style.transform = "rotate(" + (iH*30 + iM/2) + "deg)";
    minu.style.transform = "rotate(" + iM*6 + "deg)";
    second.style.transform = "rotate(" + iS*6 + "deg)";
    // 分别让时针，分针，秒针旋转
}
run();

setInterval(run,1000);

<1>. 电子时钟的Css部分

#clock_2{
    width: 450px;
    font-size: 80px;
    font-weight: bold;
    height: 300px;
    margin: 100px auto;
    color: black;
    text-align: center;
    padding-left: 20px;
}

.box1{
    margin-right: 10px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    float: left;
}

.box2{
    width: 30px;
    float: left;
    margin-right: 10px;
    margin-top: -10px;
}

<2>.电子时钟的Js部分

var hour_2 = document.getElementById("h_2");
var minute_2 = document.getElementById("m_2");
var second_2 = document.getElementById("s_2");
// 分别获取时钟，秒钟，分钟

// 获取当地时间
function time_2(){
    var date = new Date();
    var h_2 = date.getHours();
    var m_2 = date.getMinutes();
    var s_2 = date.getSeconds();
    
    if(h_2<10){
        h_2 = "0"+h_2;
    } 
    if(m_2<10){
        m_2 = "0"+m_2;
    } 
    if(s_2<10){
        s_2 = "0"+s_2;
    } 
    // 防止三个时间存在超出2位数的情况

    hour_2.innerHTML = h_2;
    minute_2.innerHTML = m_2;
    second_2.innerHTML = s_2;
}
time_2();
setInterval(time_2,1000);

四、效果图展示

在这里插入图片描述

五、注意事项

值得注意的是：
因为这是将2个时钟放在一个HTML中去实现，所以会出现选择器互相干扰，互相JS干扰。
要小心选择器的设置和选择

self_correction

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫