本文提供了一个基于原生 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 程序设计中的时间处理技巧。