基于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插件教程
Aug 25 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
详解Document.Cookie
Dec 25 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
JS作用域链详解
Jun 26 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
分析JS中this引发的bug
Dec 12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
discuz安全提问算法
2007/06/06 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
什么是会话Bean
2015/05/14 面试题
士力架广告词
2014/03/20 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
新生入学欢迎词
2015/01/26 职场文书
开除员工通知
2015/04/22 职场文书
入学证明
2015/06/23 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang