原生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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
vue实现前端列表多条件筛选
Oct 26 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预定义变量使用帮助(带实例)
2013/10/30 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP实现文件下载详解
2014/11/27 PHP
详谈PHP编码转换问题
2015/07/28 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
javascript实现表单验证
2016/01/29 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
js创建数组的简单方法
2016/07/27 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
创业融资计划书
2014/04/25 职场文书
文明家庭事迹材料
2014/12/20 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
Django实现聊天机器人
2021/05/31 Python