当前位置：首页 > news >正文

【HTML】HTML动画时钟

news 来源：原创 2025/6/25 12:46:14

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

1. 实操

实践操作步骤：

创建一个文本文件 clock.txt
将上述代码粘贴到 clock.txt 中。
修改文件后缀，将文件保存为 clock.html（只要确保扩展名是 .html即可）。
打开浏览器在浏览器的地址栏中，输入保存的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动画滚动更新。

【HTML】HTML动画时钟

今天分享一个比较有趣的HTML动画时钟，感兴趣的小伙伴可以自行上手体验一番，操作也非常简单，如下： 1. 实操实践操作步骤： 创建一个文本文件 clock.txt将上述代码粘贴到 clock.txt 中。修改文件后缀，将文…...

编程日记 2025/6/25 12:46:14

2024年全国仿真创新应用大赛 | MWORKS助力“复杂系统数字仿真”赛道，获奖名单公布

2024年全国仿真创新应用大赛全国总决赛于近日圆满落幕。大赛由工业和信息化部人才交流中心主办，以“创新引领，铸就未来”为主题，来自全国的参赛院校、企业、医学科学单位、军事科学单位及仿真领域的科研院所共计422家、近1300余人参加了此次总…...

编程日记 2025/6/22 5:23:48

npm install capacitor/ios添加ios平台 ruby要求3.0以上 rvm use ruby-3.1.0 --default npx cap add ios打开xcode看看创建的项目 npx cap open ios没有capacitor指定的位置, 估计之前pod(cocoapods)安装搞得Ruby环境很乱了......cocoapods整的我麻了... App/App/capacitor…...

编程日记 2025/6/25 11:35:02

Docker Compose 多应用部署一键部署

介绍 Docker Compose通过一个单独的docker-compose.yml模板文件(YAML格式)来定义一组相关联的应用容器，帮助我们实现多个相互关联的Docker容器的快速部署。如：springbootmysqlnginx 如果一个个去部署他会非常的麻烦，这时候可以选择Docker …...

编程日记 2025/6/20 22:31:11

ubuntu20.04安装qt creator

以上三种，选择其一安装即可回答1： 您可以按照以下步骤在ubuntu 20.04上安装Qt Creator： 打开终端并输入以下命令以更新软件包列表： sudo apt update 安装Qt Creator和Qt库： sudo apt install qtcreator qt5-def…...

编程日记 2025/6/25 12:19:58

经典NLP案例 | 推文评论情绪分析：从数据预处理到模型构建的全面指南

NLP经典案例：推文评论情绪提取项目背景 “My ridiculous dog is amazing.” [sentiment: positive] 由于所有推文每秒都在传播，很难判断特定推文背后的情绪是否会影响一家公司或一个人的品牌，因为它的病毒式传播（积极&#xff0…...

编程日记 2025/6/25 11:38:20

蓝卓生态说 | 捷创技术李恺和：把精细管理和精益生产做到极致

成功的产品离不开开放式创新和生态协同的力量。近年来，蓝卓坚持“平台生态"战略，不断加码生态，提出三个层次的开源开放生态计划，举办"春风行动”、“生态沙龙"等系列活动，与生态伙伴共生、共创、共同推…...

编程日记 2025/6/20 13:59:08

启发式搜索算法和优化算法的区别

启发式搜索算法和优化算法在计算机科学中都有广泛的应用，但它们之间存在一些明显的区别。一、定义与核心思想启发式搜索算法定义：启发式搜索算法是一类基于经验和直觉的问题求解方法，通过观察问题的特点，并根据某种指…...

编程日记 2025/6/25 10:36:30

生成树协议STP工作步骤

第一步：选择根桥优先级比较：首先比较优先级，优先级值越小的是根桥MAC地址比较：如果优先级相同，则比较MAC地址。MAC地址小的是根桥。 MAC地址比较的时候从左往右，一位一位去比第二步：所有非根…...

编程日记 2025/6/25 12:13:44

批量合并多个Excel到一个文件

工作中，我们经常需要将多个Excel的数据进行合并，很多插件都可以做这个功能。但是今天我们将介绍一个完全免费的独立软件【非插件】，来更加方便的实现这个功能。准备Excel 这里我们准备了两张待合并的Excel文件的卢易表打开的卢易表软件…...

编程日记 2025/6/25 12:02:56

如何在vue中实现父子通信

1.需要用到的组件父组件 <template><div id"app"><BaseCount :count"count" changeCount"cahngeCount"></BaseCount></div> </template><script> import BaseCount from ./components/BaseCount.v…...

编程日记 2025/6/24 1:48:17

强化学习Q-learning及其在机器人路径规划系统中的应用研究,matlab代码

一、Q-learning 算法概述 Q-learning 是一种无模型的强化学习算法，它允许智能体（agent）在没有环境模型的情况下通过与环境的交互来学习最优策略。Q-learning的核心是学习一个动作价值函数（Q-function），该函…...

编程日记 2025/6/25 11:38:19

【算法】EWMA指数加权移动平均绘制平滑曲线

EWMA（Exponentially Weighted Moving Average，指数加权移动平均）是一种常用的时间序列平滑技术，特别适用于对过去数据给予不同的权重。以下是对EWMA算法的详细介绍： 一、核心思想 EWMA算法的核心思想是通过指数衰减来…...

编程日记 2025/6/25 12:33:35

jenkins harbor安装

Harbor是一个企业级Docker镜像仓库‌。文章目录 1. 什么是Docker私有仓库2. Docker有哪些私有仓库3. Harbor简介4. Harbor安装 1. 什么是Docker私有仓库 Docker私有仓库是用于存储和管理Docker镜像的私有存储库。Docker默认会有一个公共的仓库Docker Hub，而与Dock…...

编程日记 2025/6/21 3:39:54

行为树详解（4）——节点参数配置化

【分析】行为树是否足够灵活强大依赖于足够丰富的各类条件节点和动作节点，在实现这些节点时，不可避免的，节点本身需要有一些参数供配置。这些参数可以分为静态的固定值的参数以及动态读取设置的参数。静态参数直接设置为Public即可&…...

编程日记 2025/6/24 23:58:11

在数字孪生开发领域threejs现在的最新版本已经更新到多少了？

在数字孪生开发领域three.js现在的最新版本已经更新到多少了？ 在数字孪生开发领域，three.js作为一款强大的JavaScript 3D库，广泛应用于Web3D可视化、智慧城市、智慧园区、数字孪生等多个领域。随着技术的不断进步和需求的日益增长&#xff0…...

编程日记 2025/6/22 1:33:21

UE材质常用节点

Desaturation 去色饱和度控制 Panner 贴图流动快捷键P Append 附加合并 TexCoord UV平铺大小快捷键U CustomRotator 旋转贴图 Power 幂色阶 Mask 遮罩 Lerp 线性插值快捷键L Abs 绝对值 Sin / Cos 正弦/余弦 Saturate 约束在0-1之间 Add 相加快捷键A Subtra…...

编程日记 2025/6/21 6:44:49

burp（2）利用java安装burpsuite

BurpSuite安装 burpsuite 2024.10专业版，已经内置java环境，可以直接使用， 支持Windows linux macOS！！！ 内置jre环境，无需安装java即可使用！！！ bp2024.10下载…...

编程日记 2025/6/25 12:33:36

33.攻防世界upload1

进入场景看看让上传什么类型的文件传个木马把txt后缀改为png 在bp里把png改为php 上传成功用蚁剑连接在里面找flag 得到...

编程日记 2025/5/27 7:14:12

17、ConvMixer模型原理及其PyTorch逐行实现

文章目录 1. 重点2. 思维导图 1. 重点 patch embedding : 将图形分割成不重叠的块作为图片样本特征depth wise point wise new conv2d : 将传统的卷积转换成通道隔离卷积和像素空间隔离两个部分，在保证精度下降不多的情况下大大减少参数量 2. 思维导图后续再整…...

编程日记 2025/5/31 18:09:05

【软件工程】一篇入门UML建模图（状态图、活动图、构件图、部署图）

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀软件开发必练内功_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1. 前…...

编程日记 2025/6/23 18:01:16

C# winfrom 异步加载数据不影响窗体UI

文章目录前言一、背景介绍二、使用BackgroundWorker组件实现异步加载数据2.1 添加BackgroundWorker组件2.2 处理DoWork事件三、延伸内容3.1 错误处理和进度报告3.2 线程安全结束语优质源码分享 C# winfrom 异步加载数据不影响窗体UI，在 WinForms 应用程序中&…...

编程日记 2025/6/25 7:43:52

Flutter Navigator2.0的原理和Web端实践

01 背景与动机在Navigator 2.0推出之前，Flutter主要通过Navigator 1.0和其提供的 API（如push(), pop(), pushNamed()等）来管理页面路由。然而，Navigator 1.0存在一些局限性，如难以实现复杂的页面操作（如移…...

编程日记 2025/6/21 14:34:55

latex设置引用顺序

在 LaTeX 中，引用的顺序通常是由所选择的参考文献样式（bibliographystyle） 决定的。如果你希望根据引用的顺序排列参考文献，可以选择合适的参考文献样式，并按照以下步骤进行设置。常见的几种引用顺序设置方式有&…...

编程日记 2025/6/22 6:31:08

有效的括号（字节面试题最优解）

题目来源 20. 有效的括号 - 力扣（LeetCode） 题目描述给定一个只包括 (，)，{，}，[，] 的字符串 s ，判断字符串是否有效。有效字符串需满足： 左括号必须用相同类型的右括号…...

编程日记 2025/6/24 10:55:52

短视频矩阵源码开发部署全流程解析

在当今的数字化时代，短视频已成为人们娱乐、学习和社交的重要方式。短视频矩阵系统的开发与部署，对于希望在这一领域脱颖而出的企业和个人而言，至关重要。本文将详细阐述短视频矩阵源码的开发与部署流程，并附上部分源代码示例&…...

编程日记 2025/6/24 9:51:46

iOS 环境搭建教程

本文档将详细介绍如何在 macOS 上搭建 iOS 开发环境，以便进行 React Native 开发。（为了保证环境一致全部在网络通畅的情况下运行） 1. 安装 Homebrew Homebrew 是 macOS 的包管理工具，我们将通过它来安装开发所需的工具。安装…...

编程日记 2025/6/21 17:45:45

element-ui实现table表格的嵌套（table表格嵌套）功能实现

最近在做电商类型的官网，希望实现的布局如下：有表头和表身，所以我首先想到的就是table表格组件。表格组件中常见的就是：标题和内容一一对应： 像效果图中的效果，只用基础的表格布局是不行的，因…...

编程日记 2025/6/24 11:24:39

如何使mysql数据库ID从0开始编号——以BiCorpus为例

BiCorpus是北京语言大学韩林涛老师研制一款在线语料库网站，可以通过上传tmx文件，实现在线检索功能，程序在github上开源免费，深受广大网友的喜欢。在使用过程中，我发现我上传的语言资产经历修改后，mysql的…...

编程日记 2025/6/24 16:06:55

亮相AICon，火山引擎边缘云揭秘边缘AI Agent探索与实践

12月13-14日，AICon 全球人工智能开发与应用大会在北京成功举办。火山引擎边缘智能技术负责人谢皓受邀出席大会，以《AI Agent 在边缘云的探索与实践》为主题，与全球 AI 领域的资深专家，共同深入探讨大模型落地、具身智能、多模态大…...

编程日记 2025/6/25 6:07:29

让文案生成更具灵活性/chatGPT新功能canvas画布编辑

OpenAI最近在2024年12月发布了canvas画布编辑功能，这是一项用途广泛的创新工具，专为需要高效创作文案的用户设计。无论是职场人士、学生还是创作者，这项功能都能帮助快速生成、优化和编辑文案，提升效率的同时提高内容质量…...

编程日记 2025/6/22 20:19:45

朗致面试---IOS/安卓/Java/架构师

朗致面试---IOS/安卓/Java/架构师一、面试概况二、总结三、算法题目参考答案一、面试概况一共三轮面试： 第一轮是逻辑行测，25道题目，类似于公务员考试题目，要求90分钟内完成。第二轮是技术面试，主要是做一些数据结…...

编程日记 2025/6/20 16:49:42

windows C#-实现具有自动实现属性的轻型类

下面演示如何创建一个不可变的轻型类，该类仅用于封装一组自动实现的属性。当你必须使用引用类型语义时，请使用此种构造而不是结构。可通过以下方法来实现不可变的属性： 仅声明 get 访问器，使属性除了能在该类型的构造函数中可…...

编程日记 2025/6/22 23:49:10

深度学习之Autoencoders GANs for Anomaly Detection 视频异常检测

在视频异常检测（Video Anomaly Detection）任务中，Autoencoders（自编码器）和 GANs（生成对抗网络）是常用的深度学习模型，它们在检测视频中的异常事件（如入侵、破坏、非法行为等）方面发挥着重要作用。通过分析视频帧的时空特征，这些模型能够识别出与正常行为模式不同…...

编程日记 2025/6/2 22:19:31

实现按键按下（低电平）检测到下降沿

按照流程进行编程步骤1： 初始化函数包括时基工作参数配置输入通道配置更新中断使能使能捕获、捕获中断及计数器 HAL_TIM_IC_Init(&ic_handle) //时基参数配置 HAL_TIM_IC_ConfigChannel(&ic_handle,&ic_config,TIM_CHANNEL_2) //输…...

编程日记 2025/6/19 18:55:55

【21天学习AI底层概念】day5 机器学习的三大类型不能解决哪些问题？

机器学习的三大类型——监督学习、无监督学习和强化学习，虽然可以应用于许多问题，但并非所有问题都能通过这些方法有效解决。每种类型的机器学习都有其局限性，具体如下： 1. 监督学习 (Supervised Learning) 监督学习是通过训练数…...

编程日记 2025/6/19 22:08:59

八股—Java基础(一)

目录一、Java概述 1、Java语言有哪些特点？ 2、JVM、JDK、JRE有什么区别？ 3、什么是跨平台性？原理是什么 4、Java和C有什么关系，它们有什么区别？ 5、JVM、JRE和JDK的关系是什么？ 6、什么是字节码? …...

编程日记 2025/5/30 2:12:44

PWM调节DCDC参数计算原理

1、动态电压频率调整DVFS SOC芯片的核电压、GPU电压、NPU电压、GPU电压等，都会根据性能和实际应用场景来进行电压和频率的调整。即动态电压频率调整DVFS（Dynamic Voltage and Frequency scaling），优化性能和功耗。比如某SOC在…...

编程日记 2025/6/23 18:18:04

设计一个基础JWT的多开发语言分布式电商系统

在设计一个分布式电商系统时，保证系统的可扩展性、性能以及跨语言的兼容性是至关重要的。随着微服务架构的流行，越来越多的电商系统需要在多个服务间共享信息，并且保证服务的安全性。在这样的场景下，JSON Web Token（JW…...

编程日记 2025/6/22 6:12:45

基础开发工具-编辑器vim

vim操作键盘图下图是比较基础的vim操作键盘图 （IDE例子） vi/vim的区别简单点来说，它们都是多模式编辑器，不同的是vim是vi的升级版本，它不仅兼容vi的所有指令，⽽且还有⼀些新的特性在⾥⾯。例如语法加亮&a…...

编程日记 2025/6/2 14:56:44

C#速成（文件读、写操作）

导包 using System.IO;1、写入文件（重要） StreamWriter sw new StreamWriter("C:\Users\29674\Desktop\volumn.txt");//创建一个TXT的文件 sw.WriteLine(textBox2.Text);//写入文件的内容 sw.Close();//关闭2、读取文件（不重要&…...

编程日记 2025/6/25 2:21:35

11、多态

1、多态介绍 1.1、认识多态 “一个接口，多种状态”。接口在运行期间，根据传入的参数来决定具体调用的函数，最终采取不同的执行策略。比如：一个系统的后台，管理员登录后进入的界面和普通用户进入的界面是不一样的。 …...

编程日记 2025/6/21 1:32:26

bain.js（十二）：RNN神经网络实战教程 - 音乐乐谱生成 -人人都是作曲家~

系列文章： （一）：可以在浏览器运行的、默认GPU加速的神经网络库概要介绍（二）：项目集成方式详解（三）：手把手教你配置和训练神经网络（四&#xff09…...

编程日记 2025/6/25 8:17:23

嵌入式硬件-- 元器件焊接

1.锡膏的使用锡膏要保存在冰箱里。焊接排线端子；138度的低温锡（锡膏）， 第一次使用，直接拿东西挑一点涂在引脚上，不知道多少合适，加热台加热到260左右，放在上面观察锡融化&#…...

编程日记 2025/4/25 14:44:14

java_多态

问题引导使用传统的方法来解决（private 属性）传统的方法带来的问题是什么? 如何解决? 问题是： 代码的复用性不高，而且不利于代码维护解决方案： 引出我们要讲解的多态多态的基本介绍方法或对象具有多种形态。是…...

编程日记 2025/6/24 15:21:42

如何设计一款智能手表的电子系统：从选择MCU到PCB设计

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：趣享先生的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏&…...

编程日记 2025/6/23 20:07:16

Vue Web开发（七）

1. echarts介绍 echarts官方文档首先我们先完成每个页面的路由，之前已经有home页面和user页面，缺少mail页面和其它选项下的page1和page2页面。在view文件夹下新建mail文件夹，新建index.vue，填充user页面的内容即可。在view下新建…...

编程日记 2025/6/23 10:26:29

基于米尔全志T527开发板的OpenCV进行手势识别方案

本文将介绍基于米尔电子MYD-LT527开发板（米尔基于全志T527开发板）的OpenCV手势识别方案测试。摘自优秀创作者-小火苗米尔基于全志T527开发板一、软件环境安装 1.安装OpenCV sudo apt-get install libopencv-dev python3-opencv 2.安装pip sudo apt…...

编程日记 2025/6/25 10:34:00