原生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 相关文章推荐
Javascript this指针
Jul 30 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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中基本符号及使用方法
2010/03/23 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php数据访问之查询关键字
2016/05/09 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
jQuery 表格工具集
2010/04/25 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
pandas 数据类型转换的实现
2020/12/29 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
网上快餐厅创业计划书
2014/02/01 职场文书
计算机专业自荐信
2014/05/24 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android