今天分享一个比较有趣的
HTML
动画时钟,感兴趣的小伙伴可以自行上手体验一番,操作也非常简单,如下:
1. 实操
实践操作步骤:
- 创建一个文本文件 clock.txt
- 将上述代码粘贴到 clock.txt 中。
- 修改文件后缀,将文件保存为
clock.html
(只要确保扩展名是.html
即可)。 - 打开浏览器在浏览器的地址栏中,输入保存的
HTML
文件的路径或直接双击clock.html
在浏览器中打开它。
如果一切正常,应该可以看到一个显示当前时间的数字时钟。时钟会每秒更新一次,以显示最新的时间。
2. 源码:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="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 --><divclass="container"><divclass="clock"><divclass="time-box"><divclass="numbers"id="hours-first"><li>0</li><li>1</li><li>2</li></div></div><divclass="time-box"><divclass="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><divclass="time-box"><divclass="numbers"id="minutes-first"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></div></div><divclass="time-box"><divclass="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><divclass="time-box"><divclass="numbers"id="seconds-first"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></div></div><divclass="time-box"><divclass="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;functionhandleNumber(num){if(num <10){return[0, num];}else{return[Math.floor(num /10), num %10];}}functionchangeTime(){let time =newDate();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 所有, 如有侵权,请联系我们删除。