基于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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
js实现DIV的一些简单控制
Jun 04 Javascript
javascript AutoScroller 函数类
May 29 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
php5中类的学习
2008/03/28 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python生成lmdb格式的文件实例
2018/11/08 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
初任培训自我鉴定
2013/10/07 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
幼儿老师求职信
2014/06/30 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
初中思品教学反思
2016/02/20 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js