原生javascript实现自动更新的时间日期

能够动态变化的事物总比静态的更能够吸引人，甚至更有实用效果，比如能够自动变化的时间日期效果就是如此，下面就通过代码实例介绍一下如何实现此效果，代码实例如下:
一、具体代码

<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时间日期的详细内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • JS 日期与时间戮相互转化的简单实例

    1.日期格式转时间戮 function getTimestamp(time) { return Date.parse(new Date(time)); } 2.时间戮转日期格式 function transformPHPTime(time) { var date = new Date(time * 1000); Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.ge

  • javascript时间戳和日期字符串相互转换代码(超简单)

    javascript时间戳和日期字符串相互转换代码(超简单) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> // 获取当前

  • 浅谈javascript中关于日期和时间的基础知识

    前面的话 在介绍Date对象之前,首先要先了解关于日期和时间的一些知识.比如,闰年.UTC等等.深入了解这些,有助于更好地理解javascript中的Date对象.本文将介绍javascript关于日期和时间的基础知识 标准时间一般而言的标准时间是指GMT和UTC,以前是GMT,现在是UTC GMT 格林尼治标准时间(GMT)是指位于伦敦郊区的皇家格林尼治天文台的标准时间,因为本初子午线被定义在通过那里的经线 理论上来说,格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时(也就是在格林尼治上空

  • js时间戳转为日期格式的方法

    js时间戳转为日期格式的方法

    什么是Unix时间戳(Unix timestamp): Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数.Unix时间戳不仅被使用在Unix系统.类Unix系统中,也在许多其他操作系统中被广泛采用. 目前相当一部分操作系统使用32位二进制数字表示时间.此类系统的Unix时间戳最多可以使用到格林威治时间2038年01月19日

  • js获取当前日期时间及其它日期操作汇总

    本文实例为大家分享了javascript时间操作的使用常见场景,供大家参考,具体内容如下 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,

  • js和C# 时间日期格式转换的简单实例

    下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整数1335258540000实际上是一个1970 年 1 月 1 日 00:00:00至这个DateTime中间间隔的毫秒数.通过javascript用eval函数可以把这个日期字符串转换为一个带有时区的Date对象,如下 用var date = eval('new ' + eval('/Date(

  • JS获取时间的相关函数及时间戳与时间日期之间的转换

    时间戳和时间日期的转换是常见的操作,下面就通过代码实例介绍一下如何实现它们之间的相互转换. 在没学习本文之前先给大家介绍下javascript中Date()构造函数参数: 关于Date对象大家想必一定不陌生,使用Date()构造函数创建一个时间对象是最基本的操作了,例如: var theDate=new Date(); theDate.getDate(); 使用以上代码可以获取当前日期的天. 上面是对于Date()构造函数最简单的应用了,Date对象具有多种构造函数,下面简单列举如下: new

  • 原生javascript实现自动更新的时间日期

    能够动态变化的事物总比静态的更能够吸引人,甚至更有实用效果,比如能够自动变化的时间日期效果就是如此,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: 一.具体代码 <html> <head> <meta charset="gb2312"> <title>我们</title> <script type="text/javascript"> var t = null; function ti

  • 使用Mybatis-plus策略自动更新数据库时间失败问题解决

    引言 在mybatis项目中,我们一般会使用它的插件plus以扩充它的基本查询功能.另一方面,在阿里巴巴开发手册的规范中也提到,在数据库表创建的时候,一般会有一个create_time和update_time字段,它们的建表语句往往如下: 'create_time' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, 'update_time' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE C

  • JavaScript实现实时更新系统时间的实例代码

    一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()

  • 基于JavaScript实现自动更新倒计时效果

    实现倒计时效果需要掌握js中的两个知识点: 1.setTimeout函数 每隔1秒钟更新秒钟时间 2.Date对象 计算时间差 下面贴出 元旦倒计时代码 <!DOCTYPE html> <html> <head> <title>example.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  • 原生javascript图片自动或手动切换示例附演示源码

    原生javascript图片自动或手动切换示例附演示源码

    一.效果图  二.html代码 复制代码 代码如下: <style type="text/css"> .container, .container *{margin:0; padding:0;} .container{width:408px; height:168px; overflow:hidden;position:relative;} .slider{position:absolute;} .slider li{ list-style:none;display:inl

  • MySQL中创建时间和更新时间的自动更新的实现示例

    MySQL中创建时间和更新时间的自动更新的实现示例

    目录 一.需求 二.方案 创建时间(创建日期).修改时间(修改日期)设置为自动生成 创建日期的自动生成 更新日期的自动生成 一.需求 当新增记录的时候,MySQL自动将系统的当前时间 set 到创建时间和更新时间这两个字段中.当更新记录的时候,MySQL 只 update 更新时间字段的时间,而不修改创建时间字段对应的值. 二.方案 找到表中对应的创建时间和更新时间的字段,将其修改如下: 创建时间字段creat_time timestamp NULL DEFAULT CURRENT_TIMEST

  • Jpa 实现自动更新表中的创建日期和修改时间

    一般来说创建时间和修改时间 两个字段是一个实体类必备的. 在阿里Java开发手册中也对此的说明: [强制]表必备三字段:id, create_time, update_time. 说明:其中 id 必为主键,类型为 bigint unsigned.单表时自增.步长为 1.create_time, update_time 的类型均为 datetime 类型,前者现在时表示主动式创建,后者过去分词表示被动式更新. mysql 实现添加时间自动添加更新时间自动更新 在JPA 中也是支持新的数据保存是自

  • javascript 格式化时间日期函数代码脚本之家修正版

    Date.prototype.format = function(format) { var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(

  • JavaScript时间日期操作实例小结【5个示例】

    JavaScript时间日期操作实例小结【5个示例】

    本文实例讲述了JavaScript时间日期操作.分享给大家供大家参考,具体如下: 本来想在网上找一些js实例来练练手,结果发现一本书<突破JavaScript编程实例五十讲>,看了下内容还不错,就下了下来: 后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的,代码运行之后,有些代码可以运行,有些代码已经失效,原因是其所用的一些语言是已经淘汰的了. 其次就是由于是很早之前写的,那时候可能还没有css,js,html分离的想法,都是杂糅在一起的,看起来很不舒服. 还有就是,代码末尾都是

  • 在Pycharm中自动添加时间日期作者等信息的方法

    1.按照下面路径以此打开 File→→Settings→→Editor→→File and code Templates 右侧找到Python Script,如下图 2.设置相关代码 如下 ##!/usr/bin/python3 # -*- coding: utf-8 -*- # @Time : ${DATE} ${TIME} # @Author : 未来战士biubiu!! # @FileName: ${NAME}.py # @Software: ${PRODUCT_NAME} # @Blog

随机推荐