JavaScript 动态网页时钟实现方案
本文介绍了使用 JavaScript 在网页中实现动态数字时钟的方法。通过预置数字图片数组,利用 Date 对象获取本地时间,并结合 setTimeout 定时器每秒刷新图像源,实现实时显示效果。文章提供了完整的设计思路与核心代码示例,适合前端初学者参考学习。
本文分享了利用 JavaScript 制作动态网页时钟的具体实现代码,供读者参考学习。
设计思路:
1首先创建一个数组,用于保存包含数字0至9的10张图片;
其次,使用 Date 对象获取本地当前时间,并将其赋值给变量 MyTime。
接着,调用 getHours() 方法获取 24 小时制的小时数(0-23),getMinutes() 获取分钟数(0-59),以及 getSeconds() 获取秒数(0-59)。
然后,利用 setTimeout() 函数设置每隔 1 秒调用一次显示函数,通过修改图像对象的 SRC 属性来更新画面。
此外,字符串对象的 charAt(ID) 方法用于返回指定索引位置的字符,其中索引 0 代表左侧第一个字符,索引 1 代表第二个字符,例如 charAt(1) 返回对应位置的字符。
具体代码如下:
<html>
<head>
<title>时钟</title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
</style>
<script>
function show(){
var images=new Array("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");
var myTime=new Date();
var hours=myTime.getHours();
var minutes=myTime.getMinutes();
var seconds=myTime.getSeconds();
if(hours<=9){hours="0"+hours;}//补足两位
if(minutes<=9){minutes="0"+minutes;}
if(seconds<=9){seconds="0"+seconds}
var theString=""+hours+minutes+seconds;//转换为字符串
document.getElementById("img0").src=images[theString.charAt(0)];
document.getElementById("img1").src=images[theString.charAt(1)];
document.getElementById("img2").src=images[theString.charAt(2)];
document.getElementById("img3").src=images[theString.charAt(3)];
document.getElementById("img4").src=images[theString.charAt(4)];
document.getElementById("img5").src=images[theString.charAt(5)];
setTimeout("show()",1000);
}
</script>
</head>
<body onLoad="show()">
<img id="img0" /><img id="img1" />时<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" />
</body>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
vtk.js 渲染窗口黑屏或无内容显示的常见原因及排查
2026-11-05 17:30:30
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
