基于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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
用python制作个音乐下载器
2021/01/30 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
EJB的激活机制
2013/10/25 面试题
计算机应用专业毕业生求职信
2014/06/03 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
三八妇女节标语
2014/10/09 职场文书
医生个人年终总结
2015/02/28 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python