原生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函数
Sep 08 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 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中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
php pdo操作数据库示例
2017/03/10 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
js实现3D旋转效果
2020/08/18 Javascript
python使用turtle库绘制树
2018/06/25 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
一个SQL面试题
2014/08/21 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
网络工程师的自我评价
2013/10/02 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android