【HTML】HTML动画时钟

王國慶 · 2024-12-18 14:22:40

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

本日分享一个比力风趣的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>
<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>
<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动画滚动更新。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【HTML】HTML动画时钟

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块