前端 | 实时电子时钟

文章目录

📚实现效果
📚模块实现解析
- 🐇html
- 🐇css
- 🐇JavaScript

📚实现效果

在这里插入图片描述

📚模块实现解析

🐇html

搭个框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>喵喵大王立大功</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main id="board">
        <!-- 时钟部分 -->
        <div class="clock">
            <!-- 小时 -->
            <div class="hours">
              <div class="first">
                <div class="number">0</div>
              </div>
              <div class="second">
                <div class="number">0</div>
              </div>
            </div>
            <div class="tick">:</div>
            <!-- 分钟 -->
            <div class="minutes">
              <div class="first">
                <div class="number">0</div>
              </div>
              <div class="second">
                <div class="number">0</div>
              </div>
            </div>
            <div class="tick">:</div>
            <!-- 秒 -->
            <div class="seconds">
              <div class="first">
                <div class="number">0</div>
              </div>
              <div class="second infinite">
                <div class="number">0</div>
              </div>
            </div>
        </div>
    </main>
</body>
<script src="./js/clock.js"></script>
</html>

🐇css

创建一个时钟的动画效果

* {
    padding: 0;
    margin: 0;
}

/* 整个面板 */
#board {
    position: relative;
    /* 铺满整个视口 */
    width: 100vw;
    height: 100vh;
    background-color: #F1EEE7;
}


/* #region时钟start */
.clock {
    height: 9.8vh;
    color: #e2a2aca1;
    font-size: 9.8vh;
    font-weight: bold;
    font-family: FangSong; 
    line-height: 9.8vh;
    display: flex;
    position: absolute;
    bottom: 89%;
    left: 40%;
    overflow: hidden;
}
.clock > div {
    display: flex;
}
.tick {
    line-height: 7vh;
}
.tick-hidden {
    opacity: 0;
}
/* 线性过渡，持续时间为1s */
.move {
    animation: move linear 1s infinite;
}
@keyframes move {
    from {
        transform: translateY(0vh);
    }
    to {
        transform: translateY(-10vh);
    }
}
/* #endregion时钟end */

🐇JavaScript

实时更新时间的显示，并且在数字变化时有一个平滑的动画效果。

// 锁定元素
var hoursContainer = document.querySelector('.hours') 
var minutesContainer = document.querySelector('.minutes') 
var secondsContainer = document.querySelector('.seconds') 
var tickElements = Array.from(document.querySelectorAll('.tick')) 

// 保存上一次时间，初始值为0。
var last = new Date(0) 
// 设置为-1，以确保首次更新所有时间显示
last.setUTCHours(-1) 
// 用于记录动画效果的状态
var tickState = true 

// 更新时间
function updateTime () {
    var now = new Date 
    var lastHours = last.getHours().toString() 
    var nowHours = now.getHours().toString()
    // 如果上一次时间的小时和当前时间的小时不相等
    if (lastHours !== nowHours) {
        // 更新小时的显示
        updateContainer(hoursContainer, nowHours) 
    }
    // 分钟和秒同理
    var lastMinutes = last.getMinutes().toString() 
    var nowMinutes = now.getMinutes().toString() 
    if (lastMinutes !== nowMinutes) { 
        updateContainer(minutesContainer, nowMinutes) 
    }
    var lastSeconds = last.getSeconds().toString() 
    var nowSeconds = now.getSeconds().toString() 
    if (lastSeconds !== nowSeconds) {
        updateContainer(secondsContainer, nowSeconds) 
    }
    // 更新上一次时间为当前时间
    last = now 
}

// 切换'tick'元素的CSS类'tick-hidden'以实现闪烁效果
function tick () {
    tickElements.forEach(t => t.classList.toggle('tick-hidden')) 
}

// 更新显示
function updateContainer (container, newTime) {
    var time = newTime.split('') 
    if (time.length === 1) { 
        //单个数字补0
        time.unshift('0') 
    }
    // 更新显示
    var first = container.firstElementChild 
    if (first.lastElementChild.textContent !== time[0]) { 
        updateNumber(first, time[0]) 
    }
    var last = container.lastElementChild 
    if (last.lastElementChild.textContent !== time[1]) { 
        updateNumber(last, time[1])
    }
}

// 变更动画实现
function updateNumber (element, number) {
    var second = element.lastElementChild.cloneNode(true) 
    second.textContent = number 
    element.appendChild(second) 
    element.classList.add('move') 

    setTimeout(function () {
        element.classList.remove('move')
    }, 975)
    //选用975而非1000会更平滑
    setTimeout(function () {
        element.removeChild(element.firstElementChild) 
    }, 975)
}

setInterval(updateTime, 100)