基于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 相关文章推荐
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
Echarts实现多条折线可拖拽效果
Dec 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
员工评语大全
2014/01/19 职场文书
小学生考试获奖感言
2014/01/30 职场文书
社区健康教育实施方案
2014/03/18 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
小学生作文批改评语
2014/12/25 职场文书
文体活动总结
2015/02/04 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server