前端 | 实时电子时钟

文章目录

• 实现效果
• 模块实现解析
• • html
  • css
  • JavaScript

    实现效果

    模块实现解析

    html

    • 搭个框架

                  喵喵大王立大功                                                                              0                                            0                                      :                                                      0                                            0                                      :                                                      0                                            0                                      

      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 > p {    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)