当前位置: 首页 > Web前端 > HTML5

js笔记系列--时间和时间戳

时间:2023-04-05 20:29:33 HTML5

js入门系列情况,所以理解js中时间的概念很重要。时间戳是指从格林威治标准时间1970年1月1日00:00:00(北京时间1970年1月1日08:00:00)到现在的总秒数。在时间的计算上也起着不可替代的作用。让我们通过代码来了解它们。首先我们先通过代码获取当前时间:vartime=newDate();vartimeTamp=time.getTime();text.innerHTML="time:"+time+"\ntimeTamp:"+timeTamp;如图,我们获取到的时间是js中Date对象的实例。我们可以在不加任何参数的情况下获取当前时间,我们可以通过getTime将Date实例转化为时间戳。通过代码运行结果可以看出,time一般是一个字符串,而timeTamp是一个纯数字,所以我们一般用time来显示,用timeTamp来计算~既然提到了time,那在计算上肯定和time有关。别着急,先来认识一下Date对象的功能吧。常见的有getFullYear、getMonth、getDate、getMinute、getSecond。我们用代码看看它们的作用:vartext=document.getElementById('text');vartime=newDate();vartimeTamp=time.getTime();varyear=time.getFullYear();varmonth=time.getMonth();vardate=time.getDate();varhour=time.getHours();varminute=time.getMinutes();varsecond=time.getSeconds();text.innerHTML="time:"+time+"
timeTamp:"+timeTamp+"
year:"+年+"
月:"+月+"
日:"+日+"
时:"+时+"
分:"+分+"
秒:"+第二;从图中我们可以看出,每一部分的时间都可以单独获取,使得后续的时间计算特别方便。提示:单独返回的月份是从0开始算的,结果返回4,表示是5月。既然有get方法,就有对应的set方法。这里只介绍setFullYear方法,剩下的让读者自行挖掘。变种时间=新日期();vartimeTamp=time.getTime();time.setFullYear(2018,4,20);text.innerHTML="time:"+time;setFullYear可以帮助我们设置我们期望的时间这个在实践中非常实用,尤其是当编写倒计时等演示。parse函数类似,只是返回指定时间的时间戳。这两个函数各有用途,功能相似:vartoTamp=Date.parse('1219,2015');text.innerHTML="toTamp:"+toTamp;接下来,我们使用现有的函数写一个倒计时到2018-5-20:vartext=document.getElementById('text');vartoTamp=Date.parse('520,2018');setInterval(function(){vartime=newDate();vartimeTamp=time.getTime();varoverTamp=toTamp-timeTamp;varoverTime=newDate(overTamp);overTime.setFullYear(overTime.getFullYear()-1970);overTime.setHours(overTime.getHours()-8);varoyear=overTime.getFullYear();varomonth=overTime.getMonth();varodate=overTime.getDate();varohour=overTime.getHours();varominute=overTime.getMinutes();varosecond=overTime.getSeconds();text.innerHTML="2018-5-20剩余时间:
"+年+"年"+月+"月"+odate+"日"+ohour+"小时"+ominute+"分钟"+osecond+"秒";},1000);这是一个很简单的倒计时,但是用到的代码真的是小而精,虽然不一定是最准确的,但是应该算是最简单的方法了。而当你为这个倒计时加上酷炫的特效,我想你会喜欢上他的~作为一个新手小白,我也在前端的道路上不断摸索。不要因为知识点简单或者层次不高就停止学习。盲目的愿景会让你的项目摇摇欲坠。以他人为鉴,以自己为鉴。