原生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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
js实现汉字排序的方法
Jul 23 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php调用C代码的实现方法
2014/03/11 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js charAt的使用示例
2014/02/18 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Django 前后台的数据传递的方法
2017/08/08 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
一看就懂得Python的math模块
2018/10/21 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
职业教育毕业生求职信
2013/11/09 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
关于安全的演讲稿
2014/05/09 职场文书
丽江古城导游词
2015/02/03 职场文书
创先争优活动个人总结
2015/03/04 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
接待员岗位职责范本
2015/04/15 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python