原生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提交多个表单的小技巧
Jul 27 Javascript
jquery图形密码实现方法
Mar 11 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
canvas知识总结
Jan 25 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
vue中英文切换实例代码
Jan 21 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采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python 占位符的使用方法详解
2019/07/10 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
不错的求职信范文
2014/07/20 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
家电创业计划书
2019/08/05 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
我的收音机情缘
2022/04/05 无线电