JavaScript 实现数字时钟效果：基于图片的动态显示方案

作者：竹影时间：2026-10-24 07:46:14浏览：124

本文介绍如何使用JavaScript结合图片资源实现一个动态数字时钟。通过Date对象获取当前时间，利用setInterval定时器每秒更新DOM中的图片源路径，以数字图片形式展示时、分、秒。文章提供了HTML结构、CSS样式及核心JS逻辑的完整代码示例，适合前端初学者学习定时器与DOM操作的应用。

本文分享了一段使用JavaScript实现数字时钟效果的具体代码，供读者参考学习。

运行效果展示

功能需求分析

1、利用Date对象获取当前系统时间； 2、使用setInterval间隔定时器动态刷新时间显示； 3、将setInterval的间隔时间设置为1000毫秒（即1秒），确保每秒获取一次最新时间； 4、为了提升视觉效果，采用数字图片来替代纯文本数字显示。

完整源代码实现

HTML结构部分


<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 时
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
</div>

CSS样式部分


<style>
/*无*/ 
</style>

JavaScript逻辑部分


<script>
 // 需求:数码时钟
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 获取小时
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 获取分钟
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 获取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 console.log(hours);
 console.log(minutes);
 console.log(seconds);
 }, 1000)
</script>

完整代码汇总


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 时
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
 </div>
</body>

</html>
<script>
 // 需求:数码时钟
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 获取小时
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 获取分钟
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 获取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 }, 1000)
</script>

所需图片资源说明：

运行效果展示

由于示例中未直接提供图片文件，直接复制代码可能无法显示预期效果。读者可自行准备相应的数字图片进行替换，只要理解代码逻辑，修改过程并无难度。

以上就是本文的全部内容，希望能为各位的学习提供有益帮助，也欢迎大家继续支持本站。

作者最新文章

JS怎么使用classList添加、删除和切换class

2026-11-05 17:26:02

网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作

2026-11-05 12:51:22

JS解析URL参数时怎么处理中文乱码和特殊字符

2026-11-05 12:47:23

js-cookie 存储 JSON 对象：自动序列化与反序列化技巧

2026-11-05 12:36:26

marked.js 快速上手：安装与基础 Markdown 转 HTML 示例

2026-11-05 09:32:53