本文提供了一段基于 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 实现本地时间同步的全部内容,希望这段代码能为您的学习提供有益帮助。