JavaScript 实时时钟实现代码详解
作者:闭包旅人时间:2026-10-29 20:25:14浏览:67
本文提供了一个基于原生 JavaScript 的简单时钟实现方案。通过 Date 对象获取年、月、日、时、分、秒,利用自定义函数处理不足两位数字的前置补零逻辑,并在页面加载时自动执行更新显示。代码结构清晰,适合初学者学习时间处理与 DOM 操作。
JavaScript 实时时钟实现代码详解
本文分享了一段使用 JavaScript 实现实时时钟功能的代码,供开发者参考学习。
运行效果如下所示:

实现该功能的具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>Document</title>
<script type="text/javascript">
function startTime () {
var today=new Date();
var y=today.getFullYear();
var mon=today.getMonth()+1;
mon=changNum(mon);
var d=today.getDay();
d=changNum(d);
var h=today.getHours();
var m=today.getMinutes();
m=changNum(m);
var s=today.getSeconds();
s=changNum(s);
document.getElementById("timeid").innerHTML=y+"年"+mon+"月"+d+"日"+h+":"+m+":"+s;
t=setTimeout(function(){
startTime();
},500);
}
function changNum(i){ //月、日、秒如果小于10数字前加0
if(i<10){
return "0"+i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<h1 id="timeid"></h1>
</body>
</html>
希望这段代码能帮助您更好地掌握 JavaScript 程序设计中的时间处理技巧。
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
