基于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 相关文章推荐
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
js+css3制作时钟特效
Oct 16 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 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
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
python生成器的使用方法
2013/11/21 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
简单了解python的break、continue、pass
2019/07/08 Python
python将数组n等分的实例
2019/12/02 Python
Python识别处理照片中的条形码
2020/11/16 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
风险评估实施方案
2014/03/09 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
如何利用python实现Simhash算法
2022/06/28 Python