原生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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
原生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
初探PHP5
2006/10/09 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python批量下载抖音视频
2019/06/17 Python
python随机数分布random均匀分布实例
2019/11/27 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
表演方阵解说词
2014/02/08 职场文书
党风廉政承诺书
2014/03/27 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
考研英语复习计划
2015/01/19 职场文书
雨雪天气温馨提示
2015/07/15 职场文书