原生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检查表单数据是否改变的方法
Jul 30 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 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的5个安全措施小结
2012/07/17 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python中cPickle类使用方法详解
2018/08/27 Python
python中的json总结
2018/10/11 Python
python搜索包的路径的实现方法
2019/07/19 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
环保建议书
2014/03/12 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
战友聚会策划方案
2014/06/13 职场文书
2015年教研工作总结
2015/05/23 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS