【HTML】HTML动画时钟

最新推荐文章于 2024-09-29 17:35:26 发布
最新推荐文章于 2024-09-29 17:35:26 发布
阅读量1.1k 收藏 13
点赞数 7
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Young_Pro/article/details/140762476
版权

今天分享一个比较有趣的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. 源码解析

以上这段代码是一个简单的网页时钟，它使用HTML、CSS和JavaScript来显示当前时间。以下是对代码各部分的解释：

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动画滚动更新。

Ustinian_310
关注
html：时钟 ＜script＞
qq_51874203的博客
05-06 577
1:时钟构造： 背景，表盘，指针(时针，分针，秒针），数字。 2：body： 一个div，class=clock{ p便签嵌套span标签写上1~12的数字 p标签是为了位置，span标签是为了数字的显示，能正过来 例： <p><span>1</span></p> 三个div，class分别为="hour","minute","second"。 <div id="hour"></div> <div id="m
html模拟时钟
09-23
原始资源地址（如有侵权，请联系删除）： https://download.csdn.net/download/leftmemory/6465749 在原有基础上修复Bugs: 1. 12~1点，指针乱跳 2. 此后每到*:59:00~*:00:00（每个小时的59~00分钟），指针都会乱跳 第三方js库raphael网址： http://dmitrybaranovskiy.github.io/raphael/
HTML页面显示时间——网页数字时钟、钟表
热门推荐
cnds123的专栏
09-02 4万+
一个HTML网页上动态显示系统时间——网页数字时钟、钟表，本文从简单到复杂给出一些例子。
HTML数字时钟
最新发布
as1278的博客
09-29 254
数字时钟。
Html -- 文字时钟
8023的博客
10-20 1207
文字时钟
用HTML设计一个时钟（将前端基础发挥到极致）
gaotlantis的博客
05-22 533
这次时钟的设计，包含了css关于居中和角度偏转的知识、也有js方面的时间怎么获取以及时间如何计算最后返回相应的值，都值得新手去走一遍，可以学习到CSS布局、动画与JavaScript时间处理的基础，还能深入理解如何将两者结合以实现动态效果，同时也锻炼了解决实际问题的能力。是大佬也没关系，其中有许多细节是大佬容易疏忽的，这也是一个复习基础的好机会。文章转自：https://juejin.cn/post/7371295699269222463。
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
2401_84010836的博客
04-09 557
正如你在上面的演示中看到的，我在这个手表周围使用了一个边框来制作代码边框：7px solid #282828。如果你想让这款手表更大，你可以增加它的尺寸。这意味着这款手表的指针没有任何功能，也没有显示准​​确的时间。结果，长线的中间被覆盖，并且它具有完整的 1 到 12 个标记大小。使用下面的 JavaScript，我已经给出了如何旋转这些手的说明。在这个单元格中，我使用了三只手，它们是使用下面的 HTML 和 CSS 代码制作的。我已经在下面充分解释了这段 JavaScript 代码是如何工作的。
html实现时钟
祎祎的博客
07-19 3095
【代码】html实现时钟。
HTML实现时钟
hellolater的博客
04-29 2844
效果图如下： HTML代码： <!--时钟--> <div> <canvas id="clock" style="border: 0px solid #ccc" height="200px" width="200px"></canvas> <script type="text/javascript" src="js/clock.js"></script> </div
使用HTML写了个万花筒时间表具体请看图
weixin_53767594的博客
09-13 146
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>动态时钟</title> <meta name="viewport" content="width=device-width, initial-scale=1".
使用html制作时钟
gentlevxx的博客
10-14 3073
使用html和js制作动态时钟
HTML5时钟显示
09-19
这是HTML5时钟，使用HTML5画布绘画而成，希望对大家有所帮助
HTML炫酷时钟 动态 js调用
09-04
HTML炫酷时钟 动态 js调用 做网页可以放在后台的 顶部做在线时间 和北京时间一致，动态一秒一秒的 跳动 看起来非常霸气 分享给大家
动态时钟_html
09-16
html 编写动态时钟 转自他出 分享给大家
html5绘制时钟动画
09-28
HTML5 绘制时钟动画 HTML5 绘制时钟动画是使用 HTML5 的 Canvas 元素和 JavaScript 语言来绘制一个时钟动画的过程。在这个过程中，我们可以使用 Canvas 的 2D 绘图上下文来绘制时钟的表盘、刻度、时针、分针和秒针...
html5 canvas云粒子数字时钟动画特效
11-06
在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，...
html5 css3带翻页数字时钟动画特效
11-08
在这个“html5 css3带翻页数字时钟动画特效”的主题中，我们将深入探讨如何利用这两种技术来创建一个具有翻页效果的数字时钟动画。 首先，HTML5引入了许多新的元素，比如`<canvas>`，它是一个用于在网页上绘制图形...
HTML5个性圆弧时钟动画特效特效代码
03-20
在这个"HTML5个性圆弧时钟动画特效特效代码"中，我们将深入探讨如何利用HTML5的Canvas元素和JavaScript来实现一个创新且吸引人的时钟动画。 Canvas是HTML5的一个核心组成部分，它是一个基于矢量图形的画布，允许...
黑色翻页时钟HTML源码-倒计时单页翻页时钟HTML源码
11-07
HTML源码是构建网页的基本元素，本案例中的“黑色翻页时钟HTML源码”是一个独立的、基于HTML的时钟应用，模仿了fliqlo的风格，它提供了实时显示时间、秒表以及倒计时功能。让我们深入探讨这个源码背后的HTML技术及其...
eda数字时钟设计代码
12-09
EDA数字时钟设计代码是通过EDA软件（Electronic Design Automation）进行数字时钟的硬件设计和编程的过程。通常，数字时钟的设计包括时钟电路、数字显示屏、控制模块和程序代码等多个方面。 在进行数字时钟设计代码时，首先需要进行时钟电路的设计，选择合适的晶振和时钟分频电路，保证时钟稳定可靠。然后需要设计数字显示屏的驱动电路，将时钟信号与显示屏连接起来，实时显示时钟的时间。接下来，需要设计控制模块，用于设置时钟的时间、闹钟功能等，同时保证时钟的正常运行。最后，需要编写程序代码，包括时钟的初始化、时钟的更新、时钟的显示等功能。 在EDA软件中，可以利用硬件描述语言（例如Verilog、VHDL）进行时钟电路的设计和编程。同时，也可以利用C、C++等高级语言编写程序代码，通过EDA软件将程序代码与硬件设计进行综合，生成最终的数字时钟设计代码。 数字时钟设计代码不仅需要考虑硬件设计的稳定性和可靠性，还需要考虑软件编程的灵活性和扩展性。同时，也需要充分考虑时钟的功耗、面积和成本等因素，从整体上优化设计方案。 总之，EDA数字时钟设计代码是一个综合硬件设计和软件编程的过程，需要全面考虑时钟的功能、性能和成本，并通过EDA软件进行设计验证和仿真，最终实现数字时钟设计代码的完整性和可靠性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值