JavaScript 实现本地实时时钟显示

作者:拾光

时间:2026-10-22

浏览:202

本文提供了一段基于 JavaScript 的本地时间同步代码。通过 Date 对象获取年月日时分秒,利用 checkTime 函数处理个位数补零,并在 HTML 页面加载时调用 getTime 方法,将格式化后的时间字符串动态写入指定 span 元素,实现本地时间的实时显示效果。

文章目录

JavaScript 实现本地实时时钟显示

本文分享了一段使用 JavaScript 实现本地时间同步的具体代码,供读者参考学习。

HTML 结构部分


<html>
<head>
 <title>时间</title>
 <meta charset="utf-8">
</head>
<body onload="getTime()">
 <span id="nowDateTimeSpan" ></span> 
</body>
</html>

JavaScript 脚本逻辑如下:首先定义一个名为 getTime 的函数用于获取并格式化当前时间。在函数内部,使用 new Date() 创建日期对象,分别提取年、月、日、时、分、秒。注意月份需加 1。接着调用 checkTime 辅助函数,对小于 10 的分钟、小时、日期和秒数进行前导零补全处理。最后将各部分拼接成标准时间格式字符串,并赋值给页面上的 span 元素。虽然代码中注释掉了 setTimeout 实现每秒刷新,但核心逻辑展示了如何从本地系统获取时间并格式化输出。checkTime 函数确保所有小于 10 的数字前添加 '0',以符合常见时间显示格式。


//时间
function getTime(){
 var ndate = new Date();
 var nyear = ndate.getFullYear();
 var nmonth = ndate.getMonth()+1;
 var nday = ndate.getDate(); 
 var nhour = ndate.getHours();
 var nminute = ndate.getMinutes();
 var nsecond = ndate.getSeconds();
 // 如果分钟或小时的值小于10,则在其值前加0,比如如果时间是下午3点20分9秒的话,则显示15:20:09
 nmonth=checkTime(nmonth);
 nday=checkTime(nday);
 nminute=checkTime(nminute); 
 nsecond=checkTime(nsecond); 
 document.getElementById('nowDateTimeSpan').innerHTML=nyear+"-"+nmonth+"-"+nday+" "+nhour+":"+nminute+":"+nsecond;
 document.getElementById('nowDateTimeSpan1').innerHTML=nyear+"-"+nmonth+"-"+nday+" "+nhour+":"+nminute+":"+nsecond;
 document.getElementById('nowDateTimeSpan2').innerHTML=nyear+"-"+nmonth+"-"+nday+" "+nhour+":"+nminute+":"+nsecond;
 document.getElementById('nowDateTimeSpan3').innerHTML=nyear+"-"+nmonth+"-"+nday+" "+nhour+":"+nminute+":"+nsecond;
 document.getElementById('nowDateTimeSpan4').innerHTML=nyear+"-"+nmonth+"-"+nday+" "+nhour+":"+nminute+":"+nsecond; 
 //setTimeout('getTime()',1000);//每一秒中重新加载startTime()方法
 function checkTime(i){ 
  if (i<10){
   i="0" + i;
  } 
  return i;
 }
}

以上是关于 JavaScript 实现本地时间同步的全部内容,希望这段代码能为您的学习提供有益帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章