本文介绍如何使用 JavaScript 在网页中实时显示当前时间。通过获取 Date 对象并提取年月日时分秒及星期信息,利用 innerHTML 更新指定 div 元素。结合 setTimeout 函数实现每秒自动刷新显示,确保时间动态变化。文章提供了完整的函数定义与调用示例,适用于需要展示实时时钟的前端页面开发场景。
JavaScript 实时显示当前时间方案
近期在网页开发中遇到需求,需要在页面上实时显示当前时间,要求精确到时分秒,并且能够随时间推移自动更新。经过搜索未找到完全符合要求的方案,因此自行编写了相关代码并整理如下,以便后续查阅和使用。
JavaScript 实时输出当前时间
核心函数实现
function CurentTime(divID){
var curTime=new Array();
var now=new Date();
var week=['日','一','二','三','四','五','六'];
var year=now.getFullYear(); //年
var month=now.getMonth()+1; //月
var day=now.getDate(); //日
var hh=now.getHours(); //时
var mm=now.getMinutes(); //分
var sc=now.getSeconds(); //秒
var wk=now.getDay(); //周
curTime['year']=year;
curTime['month']=month<10?'0'+month:month;
curTime['day']=day<10?'0'+day:day;
curTime['hh']=hh<10?'0'+hh:hh;
curTime['mm']=mm<10?'0'+mm:mm;
curTime['sc']=sc<10?'0'+sc:sc;
curTime['wk']='星期'+week[wk];
curTime=curTime['year']+'年'+curTime['month']+'月'+curTime['day']+'日'+' '+curTime['wk']+' '+curTime['hh']+':'+curTime['mm']+':'+curTime['sc'];
document.getElementById(divID).innerHTML='今天是:'+curTime;
setTimeout('CurentTime(\''+divID+'\')',1000);
}
具体使用方法如下:
假设网页中已存在一个 id 属性为 time 的 div 元素,则可通过以下方式调用:
页面调用示例
<script language="javascript">CurentTime('time');</script>
上述内容即为本文的全部介绍,希望读者能够喜欢。