基于JS代码实现实时显示系统时间
更新时间：2016年06月16日 15:31:13 作者：柯南&
这篇文章主要介绍了基于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代码实现实时显示系统时间的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了bootstrap侧边栏圆点导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了预防网页挂马的方法总结的相关资料,这里详细整理了具体方法，和如何实现，需要的朋友可以参考下2016-11-11
学着js的继承，自己也写了个。感觉不是很好。现在很多代码都封装成类。2010-08-08
这篇文章主要介绍了如何通过JavaScript看透彩票背后的随机算法，真实的彩票系统不是这么开发出来的，也不具备明面上的规律，我们应该相信彩票的公正性，尽管其可能不是基于随机，感兴趣的朋友可以参考阅读下2023-06-06
这篇文章主要为大家详细介绍了Three.js快速入门教程，帮助大家快速入门，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了JavaScript创建对象方法,结合实例形式总结了javascript创建对象的基本原理及使用工厂模式、构造函数模式与原型模式创建对象的相关实现技巧,需要的朋友可以参考下2018-09-09
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于利用uniapp开发APP时的调试/安卓打包等的相关资料,需要的朋友可以参考下2022-12-12
浏览器对于我们来说，可能是最熟悉的工具了。在我们的产品开发过程中，经常要考虑浏览器兼容问题，以适应不同的用户人群，同时也减少因浏览器兼容问题所带来的服务量。所以检测浏览器的版本及类型就是很重要的一件事了，下面来一起看看用Javascript如何实现。2016-08-08
这篇文章主要为大家详细介绍了JavaScript实现点击图片翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。2010-07-07
最新评论