基于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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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中在PDO中使用事务(Transaction)
2011/05/14 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
python爬虫爬取淘宝商品信息
2018/02/23 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
Python控制Firefox方法总结
2019/06/03 Python
详解python statistics模块及函数用法
2019/10/27 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Ajax的优点和缺点
2014/11/21 面试题
教育科研先进个人材料
2014/01/26 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
先进班组事迹材料
2014/12/25 职场文书
对公司的意见和建议
2015/06/04 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android