原生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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
javascript系统时间设置操作示例
Jun 17 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 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
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python赋值操作方法分享
2013/03/23 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
Python反射的用法实例分析
2018/02/11 Python
django反向解析和正向解析的方式
2018/06/05 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
《中彩那天》教学反思
2014/02/22 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
作风建设年活动总结
2014/08/27 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
Linux中文件的基本属性介绍
2022/06/01 Servers
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers