首页 前端知识 【HTML】HTML动画时钟

【HTML】HTML动画时钟

2024-10-28 20:10:21 前端知识 前端哥 804 108 我要收藏

今天分享一个比较有趣的HTML动画时钟,感兴趣的小伙伴可以自行上手体验一番,操作也非常简单,如下:

1. 实操

实践操作步骤:

  1. 创建一个文本文件 clock.txt
  2. 将上述代码粘贴到 clock.txt 中。
  3. 修改文件后缀,将文件保存为 clock.html(只要确保扩展名是 .html即可)。
  4. 打开浏览器在浏览器的地址栏中,输入保存的HTML文件的路径或直接双击clock.html在浏览器中打开它。

如果一切正常,应该可以看到一个显示当前时间的数字时钟。时钟会每秒更新一次,以显示最新的时间。

2. 源码:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Clock</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: linear-gradient(to right bottom, #7d7d7d, #070707);
      }

      li {
        list-style: none;
        height: 30px;
        width: 30px;
        margin: 0;
        padding: 0;
        font-size: 22ox;
        line-height: 30px;
        color: #bbbbbb;
      }

      .container {
        width: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 4;
        transform: translate(-50%, -50%);
      }

      .clock {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 500px;
        height: 30px;
        margin: 50% auto;
        background-color: #3b3b3b;
        box-shadow: 2px 2px 10px 3px #2f2f2f;
        transform: translateY(-50%);
        border-radius: 20px;
      }

      .time-box {
        width: 30px;
        height: 100%;
      }

      .numbers {
        background-color: #272727;
        box-shadow: 2px 2px 10px 3px #2f2f2f;
        text-align: center;
        border-radius: 10px;
        transition: all 0.5s;
      }
    </style>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <div class="clock">
        <div class="time-box">
          <div class="numbers" id="hours-first">
            <li>0</li>
            <li>1</li>
            <li>2</li>
          </div>
        </div>
        <div class="time-box">
          <div class="numbers" id="hours-second">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
          </div>
        </div>
        <div class="time-box">
          <div class="numbers" id="minutes-first">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </div>
        </div>
        <div class="time-box">
          <div class="numbers" id="minutes-second">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
          </div>
        </div>
        <div class="time-box">
          <div class="numbers" id="seconds-first">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </div>
        </div>
        <div class="time-box">
          <div class="numbers" id="seconds-second">
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
          </div>
        </div>
      </div>
    </div>
    <!-- partial -->
    <script>
      const h1 = document.getElementById('hours-first');
      const h2 = document.getElementById('hours-second');
      const m1 = document.getElementById('minutes-first');
      const m2 = document.getElementById('minutes-second');
      const s1 = document.getElementById('seconds-first');
      const s2 = document.getElementById('seconds-second');
      let hour1 = 0,
        hour2 = 0,
        minute1 = 0,
        minute2 = 0,
        second1 = 0;

      function handleNumber(num) {
        if (num < 10) {
          return [0, num];
        } else {
          return [Math.floor(num / 10), num % 10];
        }
      }

      function changeTime() {
        let time = new Date();
        const [h_1, h_2] = handleNumber(time.getHours());
        const [m_1, m_2] = handleNumber(time.getMinutes());
        const [s_1, s_2] = handleNumber(time.getSeconds());
        if (h_1 !== hour1) {
          hour1 = h_1;
          h1.style.transform = `translateY(-${hour1 * 30}px)`;
        }
        if (h_2 !== hour2) {
          hour2 = h_2;
          h2.style.transform = `translateY(-${hour2 * 30}px)`;
        }
        if (m_1 !== minute1) {
          minute1 = m_1;
          m1.style.transform = `translateY(-${minute1 * 30}px)`;
        }
        if (m_2 !== minute2) {
          minute2 = m_2;
          m2.style.transform = `translateY(-${minute2 * 30}px)`;
        }
        if (s_1 !== second1) {
          second1 = s_1;
          s1.style.transform = `translateY(-${second1 * 30}px)`;
        }
        s2.style.transform = `translateY(-${s_2 * 30}px)`;
      }
      setInterval(changeTime);
    </script>
  </body>
</html>

3. 源码解析

以上这段代码是一个简单的网页时钟,它使用HTMLCSSJavaScript来显示当前时间。以下是对代码各部分的解释:

3.1 HTML部分:
  • <!DOCTYPE html>: 声明文档类型为HTML5。
  • <html lang="en">: HTML文档的根元素,指定语言为英语。
  • <head>: 包含元数据和其他对页面有影响的元素。
    • <meta charset="UTF-8">: 设置字符编码为UTF-8。
    • <title>Clock</title>: 设置网页标题为"Clock"。
    • <style>: 包含CSS样式,用于美化页面和布局。
  • <body>: 包含网页的所有内容。
    • <div class="container">: 容器元素,用于居中显示时钟。
      • <div class="clock">: 时钟的主要容器,包含显示时间的各个部分。
        • <div class="time-box">: 每个时间数字的容器。
          • <div class="numbers" id="...">: 包含时间数字的列表,每个列表项代表一个数字。
            • <li>: 列表项,显示单个数字。
3.2 CSS部分:
  • 设置了页面的背景、字体、颜色、布局和动画效果。
  • .container 类使得时钟在页面中居中显示。
  • .clock 类定义了时钟的布局和样式。
  • .time-box.numbers 类定义了时间数字的样式和动画效果。
3.3 JavaScript部分:
  • 获取显示小时、分钟和秒数的DOM元素。
  • handleNumber 函数:将时间数字分解为十位和个位。
  • changeTime 函数:获取当前时间,并更新时钟显示。
    • 使用 new Date() 获取当前时间。
    • 使用 handleNumber 函数处理小时、分钟和秒数。
    • 更新DOM元素的 transform 属性,以滚动显示正确的数字。
  • setInterval(changeTime, 1000);: 每秒调用 changeTime 函数,以更新时钟显示。

4. 功能总结:

这个网页时钟会显示当前的小时、分钟和秒数。每个时间单位(小时、分钟、秒)都由两个 <div> 元素组成,分别显示十位和个位数字。JavaScript代码负责实时更新这些数字,以反映当前时间。当时间变化时,相应的数字会通过CSS动画滚动更新。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19376.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!