原生javascript实现自动更新的时间日期


Posted in Javascript onFebruary 12, 2016

能够动态变化的事物总比静态的更能够吸引人,甚至更有实用效果,比如能够自动变化的时间日期效果就是如此,下面就通过代码实例介绍一下如何实现此效果,代码实例如下:
一、具体代码

<html>
<head>
<meta charset="gb2312">
<title>三水点靠木</title>
<script type="text/javascript">
var t = null;
function time(){
 dt = new Date();
 var y=dt.getFullYear();
 var h=dt.getHours();
 var m=dt.getMinutes();
 var s=dt.getSeconds();
 document.getElementById("timeShow").innerHTML="当前时间:"+y+"年"+h+"时"+m+"分"+s+"秒";
 t = setTimeout(time,1000);    
} 
window.onload=function(){time()}
</script>
</head>
<body>
<div id="timeShow"></div>
</body>
</html>

以上代码实现了我们的要求,下面简单介绍一下实现过程。
二、实现原理
time()函数
能够获取当前时间日期,然后在函数最后使用定时器函数递归调用time()函数,也就是能够不断执行time()函数,于是也就实现了时间日期自动更新的经过,这里就不多介绍了。

三、相关信息补充

javascript时间函数

javascript提供了Date对象来进行时间和日期的计算。Date对象有多种构造函数:

1、dateObj=new Date() //当前时间

2、dateObj=new Date(milliseconds) //距离起始时间1970年1月1日的毫秒数

3、dateObj=new Date(datestring) //字符串代表的日期与时间。此字符串可以使用Date.parse()转换,比如"Jannuary 1, 1998 20:13:15"

4、dateObj=new Date(year, month, day, hours, minutes, seconds, microseconds) //时间数值,可以不用全部写,不写则默认为0

使用时调用对象函数,比如
year=dateObj.getFullYear();//获得年份值

下面是Date对象的函数列表,使用方法如上所示:

1)、获取类函数:
getDate() 函数 -- 返回天数(1-31)
getDay()函数 -- 返回星期数(0-6)
getFullYear() 函数 -- 返回四位数年份
getHours()函数 -- 返回小时数(0-23)
getMilliseconds() 函数 -- 返回毫秒数(0-999)
getMinutes() 函数 -- 返回分钟数(0-59)
getMonth() 函数 -- 返回月份数(0-11)
getSeconds() 函数 -- 返回的秒数(0-59)
getTime() 函数 -- 返回时间戳表示法(毫秒表示)
getYear() 函数 -- 返回年份(真实年份减去1900)

2)、设置类函数:
(以下函数均返回date对象距1970年1月1日午夜之间的毫秒数)
setDate() 函数 -- 设置月份的一天
setFullYear() 函数 -- 设置的年份,月份和天
setHours() 函数 -- 设置小时,分钟,秒和毫秒
setMilliseconds() 函数 -- 设置毫秒数
setMinutes() 函数 -- 设置分钟,秒,毫秒
setMonth() 函数 -- 设置月份,天
setSeconds() 函数 -- 设置月份的一天
setTime() 函数 -- 使用毫秒数设置date对象
setYear() 函数 -- 设置年份(真实年份减去1900)

3)、转化显示类函数:
toLocalString() 函数 -- 返回本地化字符串表示
toLocaleDateString函数 -- 返回日期部分的本地化字符串
toLocaleTimeString函数 -- 返回时间部分的本地化字符串

相对于local输出,还有:

toString()
toDateString()
toTimeString()

区别在于前者是根据不同的机器有不同的当地语言格式,后者是内部表示格式

4)、日期解析类函数

Date.parse() 函数 -- 解析一个日期的字符串,并返回该日期距1970年1月1日午夜之间的毫秒数

以上就是关于javascript时间日期的详细内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 #Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 #Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 #Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 #Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 #Javascript
浅析javascript函数表达式
Feb 10 #Javascript
详解AngularJS中的http拦截
Feb 09 #Javascript
You might like
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
js断点调试经验分享
2017/12/08 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Vue中props的详解
2019/05/16 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
set在python里的含义和用法
2019/06/24 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
上级检查欢迎词
2014/01/18 职场文书
学习演讲稿范文
2014/05/10 职场文书
关于安全的标语
2014/06/10 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
法律进社区活动总结
2015/05/07 职场文书
房产遗嘱范本
2015/08/06 职场文书