基于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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
浅谈Vue.js
Mar 02 Javascript
JS判断数组那点事
Oct 10 Javascript
React组件中的this的具体使用
Feb 28 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 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
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
YII框架关联查询操作示例
2019/04/29 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
深入解析Python中的上下文管理器
2016/06/28 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Django中URL的参数传递的实现
2019/08/04 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
教师自荐信范文
2013/12/09 职场文书
2014年大学生自我评价
2014/01/19 职场文书
党的生日活动方案
2014/08/15 职场文书
婚庆公司计划书
2014/09/15 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书