基于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 document.referrer 用法
Apr 30 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
php 修改密码实现代码
May 24 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
python进阶_浅谈面向对象进阶
2017/08/17 Python
python机器学习之神经网络(三)
2017/12/20 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python+os根据文件名自动生成文本
2019/03/21 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python selenium的基本使用方法分析
2019/12/21 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
书法培训心得体会
2014/01/05 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
服务承诺书怎么写
2014/05/24 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
工作所在部门证明
2014/09/21 职场文书
努力学习保证书
2015/02/26 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Python中文纠错的简单实现
2021/07/07 Python