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

编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
这篇文章主要介绍了基于JS代码实现实时显示系统时间的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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,在前面补0
if(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代码实现实时显示系统时间的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板