基于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 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
2014过年倒计时示例
2014/01/31 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python解惑之True和False详解
2017/04/24 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
python批量修改图片大小的方法
2018/07/24 Python
python面试题小结附答案实例代码
2019/04/11 Python
工业设计专业个人求职信范文
2013/12/28 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
课程改革实施方案
2014/03/16 职场文书
家长对老师的评语
2014/04/18 职场文书
2014年药店工作总结
2014/11/20 职场文书
党员个人年度总结
2015/02/14 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
工作感想范文
2015/08/07 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
go goroutine 怎样进行错误处理
2021/07/16 Golang
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL