原生javascript实现自动更新的时间日期
能够动态变化的事物总比静态的更能够吸引人，甚至更有实用效果，比如能够自动变化的时间日期效果就是如此，下面就通过代码实例介绍一下如何实现此效果，代码实例如下:
一、具体代码
<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时间日期的详细内容，希望对大家的学习有所帮助。
相关文章
触屏事件touch也称为触摸事件,touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔,触屏事件可响应用户手指(或触摸笔)对屏幕或者触控板操作,下面这篇文章主要给大家介绍了关于JavaScript移动端常用事件之touch触摸事件的相关资料,需要的朋友可以参考下2022-10-10
bootstrap自定义样式之bootstrap实现侧边导航栏功能
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单。接下来通过本文给大家介绍bootstrap实现侧边导航栏功能，感兴趣的朋友一起看看吧2018-09-09
多维数组的意思是指三维或者三维以上的数组。这篇文章将通过示例为大家详细讲解一下JavaScript如何实现优雅地创建多维数组，需要的可以参考一下2022-07-07
本文主要给大家介绍了javascript的一些函数定义方面的基础知识，包括函数声明式、函数表达式、Function 构造函数等，十分的简单实用，有需要的小伙伴可以参考下。2015-06-06
javascript中的__defineGetter__和__defineSetter__介绍
这篇文章主要介绍了javascript中的__defineGetter__和__defineSetter__介绍,类似面向对象语言中的get和set关键字,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了JavaScript如何模拟实现Promise功能，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，需要的可以参考一下2022-12-12
解读new Object()和Object.create()的区别
这篇文章主要介绍了解读new Object()和Object.create()的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了JS实现联想、自动补齐国家或地区名称的功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要给大家介绍了关于微信小程序js时间戳与日期格式的转换方法,在小程序中使用时间选择器时,获取到的时间可能是一个时间戳,这并不是我们想要的,这时候我们得将获取到的时间戳进行转换,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了JS实现可点击展开与关闭的左侧广告代码,通过鼠标onClick事件调用自定义javascript函数实现页面元素及样式的显示与隐藏效果,非常简单实用,需要的朋友可以参考下2015-09-09
最新评论