基于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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
JavaScript组合模式---引入案例分析
May 23 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 和 MySQL 基础教程(一)
2006/10/09 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
laravel请求参数校验方法
2019/10/10 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python内置函数delattr的具体用法
2017/11/23 Python
python3爬虫之设计签名小程序
2018/06/19 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python求离散序列导数的示例
2019/07/10 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
基于python实现从尾到头打印链表
2019/11/02 Python
dpn网络的pytorch实现方式
2020/01/14 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
实习自我评价怎么写
2013/12/02 职场文书
考试退步检讨书
2014/01/15 职场文书
暑期培训随笔感言
2014/03/10 职场文书
小区推广策划方案
2014/06/06 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
golang定时器
2022/04/14 Golang