原生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 学习笔记(十二) dom
Jan 21 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JS代码优化的8点建议
Feb 04 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
建立动态的WML站点(三)
2006/10/09 PHP
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP程序员编程注意事项
2008/04/10 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
酒店保安员岗位职责
2014/01/31 职场文书
《燕子》教学反思
2014/02/18 职场文书
岳庙导游词
2015/02/04 职场文书
大连导游词
2015/02/12 职场文书
个人党性锻炼总结
2015/03/05 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS