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


Posted in Javascript onJune 16, 2016

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代码实现实时显示系统时间的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 #Javascript
jquery插件格式实例分析
Jun 16 #Javascript
详解JavaScript对象类型
Jun 16 #Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 #Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 #Javascript
JSON字符串和对象相互转换实例分析
Jun 16 #Javascript
jQuery的层级查找方式分析
Jun 16 #Javascript
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
PHP无限分类(树形类)
2013/09/28 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python编程羊车门问题代码示例
2017/10/25 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
keras slice layer 层实现方式
2020/06/11 Python
Python类成员继承重写的实现
2020/09/16 Python
自荐信的禁忌和要点
2013/10/15 职场文书
化工机械应届生求职信
2013/11/04 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
中国入世承诺
2014/04/01 职场文书
《春晓》教学反思
2014/04/20 职场文书
鲁迅故里导游词
2015/02/05 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers