基于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 ui resizable bug解决方法
Oct 26 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
vue模板语法-插值详解
Mar 06 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 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
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
Mac地址验证的javascript代码
2013/11/09 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
JS实现购物车特效
2017/02/02 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python根据url地址下载小文件的实例
2018/12/18 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
财务工作疏忽检讨书
2014/09/11 职场文书
企业委托书范本
2014/09/13 职场文书
买卖合同协议书范本
2014/10/18 职场文书
教师岗位职责
2015/02/03 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server