基于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 :first选择器使用介绍
Aug 09 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
vue-cli 为项目设置别名的方法
Oct 15 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
ftp类(myftp.php)
2006/10/09 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
destoon二次开发入门示例
2014/06/20 PHP
php数组使用规则分析
2015/02/27 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
养成教育经验材料
2014/05/26 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
python的html标准库
2022/04/29 Python