基于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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
javascript常用对话框小集
Sep 13 Javascript
YUI模块开发原理详解
Nov 18 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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
mysql时区问题
2008/03/26 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
基于php编程规范(详解)
2017/08/17 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Python实现单词拼写检查
2015/04/25 Python
python图像处理之反色实现方法
2015/05/30 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
django基于restframework的CBV封装详解
2019/08/08 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
个人自我评价和职业目标
2014/01/24 职场文书
网页美工求职信
2014/02/15 职场文书
经管应届生求职信范文
2014/05/18 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
自荐信格式模板
2015/03/27 职场文书
react 路由Link配置详解
2021/11/11 Javascript
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL