关于javascript:JS30Wes-Bos实时显示的时钟网页-02

title:【原生 javascript 我的项目】Real time clock 02
date: 2021-11-12 14:46:15
tags: 原生 javascript 我的项目
categories: 30 个原生 javascript 我的项目

引言

本文利用 javascript 写一个实时显示工夫的时钟特效网页。

网址为 (https://janice143.github.io/r…)

注释

1 网页布局与性能

网页主体为一个时钟，具备表盘（12 个数字）和三个指针（时针、分针、秒针）。

2 实现原理

一、html 代码

应用一个类名为 clock 为的 div 容器，外面蕴含时针.hour-hand, 分针.minute-hand, 秒针 second-hand，以及 12 个数字。

<div class="clock">
    <div class="hour-hand hand"></div>
    <div class="minute-hand hand"></div>
    <div class="second-hand hand"></div>
    <div class="number">
        <span class="num12">12</span>
        <span class="num1">1</span>
        <span class="num2">2</span>
        <span class="num3">3</span>
        <span class="num4">4</span>

        <span class="num5">5</span>
        <span class="num6">6</span>
        <span class="num7">7</span>
        <span class="num8">8</span>

        <span class="num9">9</span>
        <span class="num10">10</span>
        <span class="num11">11</span>

    </div>
</div>

二、css 代码

1 先让时钟显示在页面的中部（垂直居中，程度居中），这能够用个在 clock 的上一级词 main 中设置 flex 容器。

#main{

    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;

}

2 时钟的表盘的款式

.clock{
    width: 300px;
    height: 300px;
    border-radius: 300px;
    border: 20px solid white;
    position: relative;
}

3 指针的款式

指针旋转的特效是由 transfrom：rotate(deg) 实现的（本文这里是通过 js 代码前面再设置的）。transform-origin 默认是 50%，元素会绕着两头旋转，设置成 100% 后，元素绕着一端旋转。transition-timing-function 是设置过渡的工夫函数特效，不设置是默认平均地过渡。

.hand{
    width: 120px;
    height: 6px;
    background-color: blueviolet;
    position:absolute;
    top:148px;
    right: 148px;
    transform-origin: 100%;
    transition:all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand{width: 100px;}
.second-hand{height: 4px;}

4 12 个数字的款式

先给数字设置绝对定位，绝对于上一级.number。而后再给每个数字设置相应的 top 和 left. 数字地位算法为：

num=2; top=135sin((num-3)30/180pi)+135；left=135cos((num-3)30/180pi)+135（num 为 1 -12 的数字）

.number{
    width: 300px;
    height:300px;
    font-size: 15px;


    position:absolute;
    top:0px;
    right: 0px;
}

三、javascript 代码

别离获取时针、分钟、秒针的类名，而后通过以后工夫给三个指针调配正确的旋转角度。

1 秒针：parseInt(second/60*360)+90;

2 分针：parseInt(minute/(60)*360+second/10)+90;

3 时针：parseInt(hour/(12)360+minute/(60)30)+90;

+90 度是因为设置指针 css 款式的时候，指针都在指在 9 点钟的地位，+90 度可让指针从 12 点为起始点旋转。

设置为指针的角度后，利用定时器每隔一秒刷新指针的地位，这样就能够达到实时显示的成果。

当指针转弯一圈后，从新运行设置工夫函数 setDate() 重置指针的角度。

  // 获取指针的 transform 款式，从而让其旋转
        const secondHand = document.querySelector('.second-hand');
        const minuteHand = document.querySelector('.minute-hand');
        const hourHand = document.querySelector('.hour-hand');

        const audio = document.querySelector('audio');
        // 获取以后工夫，从工夫里设置指针
        function setDate(){const time = new Date();
            const second = time.getSeconds();
            const secondDeg = parseInt(second/60*360)+90;
            secondHand.style.transform = `rotate(${secondDeg}deg)`;

            const minute= time.getMinutes();
            const minuteDeg = parseInt(minute/(60)*360+second/10)+90;
            minuteHand.style.transform = `rotate(${minuteDeg}deg)`;

            const hour= time.getHours();
            const hourDeg = parseInt(hour/(12)*360+minute/(60)*30)+90;
            hourHand.style.transform = `rotate(${hourDeg}deg)`;
            
        }
        // 设置定时器美隔一秒工夫进行刷新页面
        setInterval(setDate,1000);
        // 
        setDate(); // 当指针转一圈后，重置度数

总结

残缺代码放在了 Github 上，如果读者有趣味，无妨试一试。