原生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中index()的用法分析
Sep 05 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
vue 实现特定条件下绑定事件
Nov 09 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
三好学生自我鉴定
2013/12/17 职场文书
小学毕业感言150字
2014/02/05 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
考试作弊检讨书
2014/10/21 职场文书
学期个人工作总结
2015/02/13 职场文书
民事代理词范文
2015/05/25 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Java SSM配置文件案例详解
2021/08/30 Java/Android
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android