基于JS代码实现实时显示系统时间

时间：2021-05-25

1.概述

在浏览很多网站时，都会发现在网站中加入了显示当前系统时间的功能，在网页中显示当前系统时间，不仅可以方便浏览者掌握当前时间，而且还美化了网页。

2.技术要点

利用Date对象来实现。首先创建一个表示当前系统时间的Date()对象，然后通过Date对象的getXxx()方法获得当前系统时间的年、月、日、小时、分、秒和星期的值，接下来将获得的这些值组合成一个日期时间字符串，并将日期时间字符串设置成为<div>标签的内容，最后通过window对象的setTimeout()函数每隔1秒调用一个实时显示系统时间的函数。

3.具体实现

（1）新建index.jsp页，编写实时显示系统时间的JavaScript函数，关键代码如下：

/***实时显示系统时间*/function getLangDate(){var dateObj = new Date(); //表示当前系统时间的Date对象 var year = dateObj.getFullYear(); //当前系统时间的完整年份值var month = dateObj.getMonth()+1; //当前系统时间的月份值 var date = dateObj.getDate(); //当前系统时间的月份中的日var day = dateObj.getDay(); //当前系统时间中的星期值var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串 var hour = dateObj.getHours(); //当前系统时间的小时值 var minute = dateObj.getMinutes(); //当前系统时间的分钟值var second = dateObj.getSeconds(); //当前系统时间的秒钟值//如果月、日、小时、分、秒的值小于10，在前面补0if(month<10){month = "0"+month;}if(date<10){date = "0"+date;}if(hour<10){hour = "0"+hour;}if(minute<10){minute = "0"+minute;}if(second<10){second = "0"+second;}var newDate = year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minute+":"+second;document.getElementById("dateStr").innerHTML = "系统公告：[ "+newDate+" ]";setTimeout("getLangDate()",1000);//每隔1秒重新调用一次该函数 }

（2）在页面<body>标签中通过onload事件加载步骤（1）中编写的JavaScript函数，并在页面的适当位置加入<div>标签，id为“dateStr“，关键代码如下：

<body onLoad="getLangDate()"><div id="dateStr" class="word_grey"></div></body>

在实现实时显示系统时间时，还可以使用window对象的setIntervar()方法，setInterval()方法类似于setTimeout()方法。

不同之处是调用window对象的setIntervar()方法后，会一直执行setIntervar()方法所调用的JavaScript方法，而setTimeout()方法只能被执行一次。如果要通过setTimeout()方法一直执行某个JavaScript方法，setTimeout()必须写在被调用的JavaScript方法体内。

以上所述是小编给大家介绍的基于JS代码实现实时显示系统时间的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章