本文介绍如何利用JavaScript的Date对象获取当前系统时间，并通过setInterval定时器每秒更新页面显示。代码演示了如何提取年、月、日、星期及时分秒，并将其格式化输出到指定DOM元素，实现网页端的实时时钟功能。
JavaScript实时时钟实现原理
本文分享一段使用JavaScript获取当前时间并展示结果的完整代码示例，供读者参考学习。
具体实现代码如下所示。
完整HTML与JS代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title></title>
<script type="text/javascript">
window.onload=function(){
setInterval(function(){
var date=new Date();
var year=date.getFullYear(); //获取当前年份
var mon=date.getMonth()+1; //获取当前月份
var da=date.getDate(); //获取当前日
var day=date.getDay(); //获取当前星期几
var h=date.getHours(); //获取小时
var m=date.getMinutes(); //获取分钟
var s=date.getSeconds(); //获取秒
var d=document.getElementById('Date');
d.innerHTML='当前时间:'+year+'年'+mon+'月'+da+'日'+'星期'+day+' '+h+':'+m+':'+s;
},1000)
}
</script>
</head>
<body>
<div id="Date">
</div>
</body>
</html>
效果图：
核心逻辑是通过创建Date实例获取时间属性，并利用setInterval函数每秒执行一次更新操作。代码中分别提取了年份、月份、日期、星期、小时、分钟和秒数，最后将这些数据拼接成字符串，更新到ID为'Date'的HTML元素中。
Date对象常用方法说明
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
希望这段代码能帮助读者掌握JavaScript中时间处理的基本方法。