当前位置: 首页 > 编程笔记 >

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

曹乐意
2023-03-14
本文向大家介绍原生javascript实现自动更新的时间日期,包括了原生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时间日期的详细内容,希望对大家的学习有所帮助。

 类似资料:
  • 本文向大家介绍基于JavaScript实现自动更新倒计时效果,包括了基于JavaScript实现自动更新倒计时效果的使用技巧和注意事项,需要的朋友参考一下 实现倒计时效果需要掌握js中的两个知识点: 1、setTimeout函数 每隔1秒钟更新秒钟时间 2、Date对象 计算时间差 下面贴出 元旦倒计时代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 问题内容: 如果我在类型表中具有一列并且具有默认值:CURRENT_TIMESTAMP如果我更新同一行中 任何 其他列的值,此列是否会更新为当前时间戳? 似乎没有,但是我不确定这是否应该发生。 我不明白这是什么意思(来自MySQL文档): 如果该列是自动更新的,则当该行中任何其他列的值从其当前值更改时,它将自动更新为当前时间戳。如果所有其他列均设置为其当前值,则该列保持不变。为防止当其他列更改时该

  • 本文向大家介绍原生JavaScript实现滚动条效果,包括了原生JavaScript实现滚动条效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解原生JavaScript实现滚动条效果的相关代码,分享给大家供大家参考,具体内容如下 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根据滑动条块移动的百分比算出滚动区域的滚动程度,用marginLeft进行滚动,具体的写在注释里。 整

  • 我的程序使用日期来检查工程师何时访问过机器。唯一的问题是日期并不是最新的。机器显示的日期和时间是机器启动的准确时间。当按钮被点击时就不会了。任何帮助都会有帮助。 代码:

  • 本文向大家介绍原生JavaScript实现AJAX、JSONP,包括了原生JavaScript实现AJAX、JSONP的使用技巧和注意事项,需要的朋友参考一下 相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的。 其实,原生JavaScript实现A

  • 本文向大家介绍原生js实现自定义滚动条,包括了原生js实现自定义滚动条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现自定义滚动条的具体代码,供大家参考,具体内容如下 1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。 2.css样式文件 通过容器溢出隐藏,文本区域的绝对定位,然后再交给js处理。 3.js脚本代码 以上就是本