原生JS翻页时钟

前端

2023-12-05 23:08:12

原生JS实现一个翻页时钟

前言

在考研备战的氛围中，自习室里随处可见平板电脑上显示的翻页时钟，看着看着，难免也想要自己动手实现一个。本文将用原生JS操纵DOM来实现一个简单的翻页时钟。

实现原理

翻页时钟的实现原理并不复杂，主要基于以下几个关键步骤：

创建一个包含数字 0-9 的 DOM 元素集合。
创建一个表示当前时间的 DOM 元素。
定时更新当前时间的 DOM 元素，每秒钟更新一次。
当当前时间发生变化时，根据当前时间和数字集合来更新翻页效果。

代码实现

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .clock {
      width: 300px;
      height: 300px;
      margin: auto;
      text-align: center;
      font-size: 50px;
      color: #000;
    }

    .number {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: #fff;
      border: 1px solid #000;
      margin: 5px;
      line-height: 50px;
      transition: all 0.5s ease-in-out;
    }

    .number.active {
      background-color: #000;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="number" id="tens">0</div>
    <div class="number" id="ones">0</div>
    <div class="number" id="seconds">0</div>
  </div>

  <script>
    const tens = document.getElementById('tens');
    const ones = document.getElementById('ones');
    const seconds = document.getElementById('seconds');

    let time = 0;

    setInterval(() => {
      time++;

      const tensValue = Math.floor(time / 10);
      const onesValue = time % 10;

      tens.innerText = tensValue;
      ones.innerText = onesValue;

      if (time % 60 === 0) {
        seconds.classList.add('active');

        setTimeout(() => {
          seconds.classList.remove('active');
        }, 500);
      }
    }, 1000);
  </script>
</body>
</html>