【HTML】HTML动画时钟

今天分享一个比较有趣的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动画滚动更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64139.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux高并发服务器开发 第四天(wc/whoami命令 权限修改chmod 添加/删除用户(组) 切换用户 修改文件所有者/所属组 查找/过滤)

目录 1.wc和whoami命令 1.1wc命令 1.2whoami命令 2.用户权限/用户/用户组 2.1修改文件权限chmod 2.1.1文字设定法 2.1.2数字设定法 2.2添加删除新用户和新用户组 2.3切换用户 2.4修改文件所有者和所属组 2.4.1修改所有者 2.4.2修改所属组 3.查找和过滤 3.1find—…

微服务架构导学

一. 什么是微服务 微服务是一个软件架构风格&#xff0c;将一个大型的项目拆分成多个小项目&#xff0c;每个项目都被称为一个微服务&#xff0c;通过多个微服务共同组成一个大的项目。 二. 单体架构和微服务架构 单体架构 将整个项目的功能、模块全部堆积在一个项目中 优点&am…

【kubernetes】kubectl get nodes报NotReady

目录 1. 说明2. 问题描述3. kube-flannel.yml 1. 说明 1.这里k8s的版本是v1.17.4。2.若kube-flannel.yml中的镜像拉取不下来&#xff0c;可以下载本文章的文件资源&#xff0c;手动docker load -i ***.tar的方式。3.v1.17.4的kube-flannel.yml参考下面代码。4.通过kubectl get…

web实操7——ServletContext

概念 和服务器通信 功能 解释说明&#xff1a; mime&#xff1a;互联网中一种文件的类型&#xff0c;可以用servletContext对象来获取。 域对象&#xff1a;用来共享数据&#xff0c;里面有一些get,set,removeAttribute,只要搞清楚ServletContext对象的域的范围是什么 如何…

C语言之输入输出

标准库 IO 输入输出功能并非C语言的组成部分&#xff0c;ANSI标准定义了相关的库函数 输入输出 <stdio.h> 流stream是与设备关联的数据的源或者目的地。 文本流&#xff1a;由文本行组成的序列 不同系统的特性可能不一样&#xff0c;比如行最大长度和行结束符 二进制流…

LLMC:大语言模型压缩工具的开发实践

关注&#xff1a;青稞AI&#xff0c;学习最新AI技术 青稞Talk主页&#xff1a;qingkelab.github.io/talks 大模型的进步&#xff0c;正推动我们向通用人工智能迈进&#xff0c;然而庞大的计算和显存需求限制了其广泛应用。模型量化作为一种压缩技术&#xff0c;虽然可以用来加速…

微信小程序的文件结构

微信小程序的文件结构非常直观且高效&#xff0c;主要由几个关键文件夹和文件组成。以下是对微信小程序文件结构的详细解析&#xff1a; 一、关键文件夹 Pages文件夹&#xff1a; 这是小程序的“心脏”&#xff0c;包含了每个页面的文件。每个页面通常由四个文件定义&#xff…

数据安全法-政务数据安全与开放

第五章 政务数据安全与开放 第三十七条 国家大力推进电子政务建设&#xff0c;提高政务数据的科学性、准确性、时效性&#xff0c;提升运用数据服务经济社会发展的能力。 第三十八条 国家机关为履行法定职责的需要收集、使用数据&#xff0c;应当在其履行法定职责的范围内依…

总结与提升

今天学习了ai&#xff0c;对今天学习的内容进行总结。 本文参考chat gpt-4的训练文献。 模型架构基础 Transformer 架构&#xff1a;ChatGPT 采用了 Transformer 架构&#xff0c;这是一种基于自注意力机制的深度学习模型架构。它能够并行计算文本中的长期依赖关系&#xff…

舌头分割数据集labelme格式2557张1类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)&#xff1a;2557 标注数量(json文件个数)&#xff1a;2557 标注类别数&#xff1a;1 标注类别名称:["tongue"] 每个类别标注的框数&#xff1…

Jenkins 启动 程序 退出后 被杀死问题

参考 Spawning Processes From Build (jenkins.io) 解决jenkins脚本启动项目后进程被杀死_jenkins杀进程-CSDN博客

使用 Maven 来构建 Scala

以下是使用Maven构建Scala项目的基本步骤&#xff1a; 1. 创建Maven项目 - 可以使用Maven的原型&#xff08;archetype&#xff09;来创建项目。在命令行中运行 mvn archetype:generate -DgroupIdcom.example -DartifactIdmy -scala - project -DarchetypeArtifactIdmaven - ar…

测试工程师八股文03|Python编程题

一、题目 1、合并两个数组 class Solution:def merge(self, nums1: List[int], m: int, nums2: List[int], n: int) -> None:nums1[m:] nums2nums1.sort()2、判断链表中是否有环 class Solution:def hasCycle(self, head: ListNode) -> bool:seen set()while head:if…

[Unity] AppLovin Max接入Native 广告 Android篇

把下载下来的maxnativelibrary-release-文件放在Plugins/Android下 将这一行加入到mainTemplate.gradle文件中 implementation androidx.constraintlayout:constraintlayout:2.1.4添加下面的两个脚本 using System; using System.Collections; using System.Collections.Gener…

Pytest测试用例使用小结

基础使用 Pytest 测试用例实现代码 import pytest from server.service import Servicepytest.fixture def service():return Service(logger)class TestService:classmethoddef setup_class(cls):"""初始化设置一次:return:"""logger.info(&q…

MyBatis-Plus 基础

教程 视频教程&#xff1a;https://www.bilibili.com/video/BV1Xu411A7tL 详细文档&#xff1a;https://b11et3un53m.feishu.cn/wiki/PsyawI04ei2FQykqfcPcmd7Dnsc 常见注解 MybatisPlus就是根据PO实体的信息来推断出表的信息&#xff0c;从而生成SQL的。默认情况下&#xf…

VMware Workstation Pro 17 下载 以及 安装 Ubuntu 20.04.6 Ubuntu 启用 root 登录

1、个人免费版本 VMware Workstation Pro 17 下载链接怎么找&#xff1f;直接咕咕 VMware 找到如下链接。链接如下&#xff1a;Workstation 和 Fusion 对个人使用完全免费&#xff0c;企业许可转向订阅 - VMware 中文博客 点进去链接之后你会看到如下&#xff0c;注意安装之后仍…

30、使用ESP8266跟SG90舵机制作四足蜘蛛机器人

目录 1、简介 2、使用例子 3、代码解析 4、资源下载 正文 1、简介 本篇使用ESP8266跟SG90舵机制作四足蜘蛛机器人,使用的180度舵机有8个,需要一块16路舵机控制板,也可以使用小一点的控制板8路也够了。下面开始今天的教程,源码在文章末尾自行下载,力求大家都能看懂。…

python 将数据保存到现有的Excel文件的新工作表

out_file ‘query.xlsx’ df1 pd.DataFrame(out_data) 若直接写入&#xff1a; df1.to_excel(out_file, indexFalse, sheet_name‘v5v7’) # 将第二个DataFrame保存到现有的Excel文件的新工作表 with pd.ExcelWriter(out_file, engine‘openpyxl’, mode‘a’) as writer:…

深度学习——激活函数、损失函数、优化器

深度学习——激活函数、损失函数、优化器 1、激活函数1.1、一些常见的激活函数1.1.1、sigmoid1.1.2、softmax1.1.3、tanh1.1.4、ReLU1.1.5、Leaky ReLU1.1.6、PReLU1.1.7、GeLU1.1.8、ELU 1.2、激活函数的特点1.2.1、非线性1.2.2、几乎处处可微1.2.3、计算简单1.2.4、非饱和性1…