js笔记系列之--时间及时间戳

js入门系列之

时间及时间戳时间及时间戳

时间及时间戳是js里面很常见的一个概念，在我们写前端页面的时候，经常会遇到需要获取当前时间的情况，所以，了解js中的时间概念非常重要。而时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数，在关于时间的计算中也起着不可替代的作用。下面我们通过代码来认识一下他们。首先，我们先通过代码获取当前时间:

var time=new Date();

var timeTamp=time.getTime();

text.innerHTML="time:"+time+" \ntimeTamp:"+timeTamp;

如图所示，我们所得到的time就是js中Date对象的实例，在不添加任意参数的情况下我们可以得到当前的时间，而通过getTime我们可以把Date实例转化为时间戳。通过代码运行结果我们可以看到，time一般是一个字符串，而timeTamp则是一个纯数字，所以我们一般把time用来显示，而把timeTamp用来计算~
既然提到了时间，那么肯定关系到了时间上的计算。先不急，我们先来熟悉一下关于Date对象的函数，常见的有getFullYear,getMonth,getDate,getMinute,getSecond,我们用代码看一下他们的作用:

var text=document.getElementById('text');

var time=new Date();

var timeTamp=time.getTime();

var year=time.getFullYear();

var month=time.getMonth();

var date=time.getDate();

var hour=time.getHours();

var minute=time.getMinutes();

var second=time.getSeconds();

text.innerHTML="time:"+time+"<br/>timeTamp:"+timeTamp+"<br/>year:"+year+"<br/>month:"+month+"<br/>date:"+date+"<br/>hour:"+hour+"<br/>minute:"+minute+"<br/>second:"+second;

从图中我们可以看到关于时间的每部分我们都可以单独得出，使得后续时间计算尤为方便。提示一下：单独返回的月份是从0开始算的，结果中返回了4，也就是代表是五月。那么既然有get方法，就有对应的set方法，这里小编只介绍setFullYear方法，其他的就让读者们自己去挖掘把。

var time=new Date();

var timeTamp=time.getTime();

time.setFullYear(2018,4,20);

text.innerHTML="time:"+time;

setFullYear可以帮我们将time设定为我们期待的时间，这在实际中是非常实用的，尤其是写倒计时之类的demo。相似的还有parse函数,只不过它返回的是指定时间的时间戳，这两个函数各有所用之地，作用相似：

var toTamp=Date.parse('12 19,2015');

text.innerHTML="toTamp:"+toTamp;

下面我们利用现有的函数写一个倒计时，是到2018-5-20号的：

var text=document.getElementById('text');

var toTamp=Date.parse('5 20,2018');

setInterval(function(){

var time=new Date();

var timeTamp=time.getTime();

var overTamp=toTamp-timeTamp;

var overTime=new Date(overTamp);

overTime.setFullYear(overTime.getFullYear()-1970);

overTime.setHours(overTime.getHours()-8);

var oyear=overTime.getFullYear();

var omonth=overTime.getMonth();

var odate=overTime.getDate();

var ohour=overTime.getHours();

var ominute=overTime.getMinutes();

var osecond=overTime.getSeconds();

text.innerHTML="离2018-5-20剩余时间还有：<br/>"+oyear+"年"+omonth+"月"+odate+"天"+ohour+"时"+ominute+"分"+osecond+"秒";

},1000);

这是一个十分简易的倒计时，但是所用到的代码确实不多而且简洁，虽然不一定是最精确的，但是应该算是最简单的一种方法了。而当你为这个倒计时加上酷炫的特效时，我想你会喜欢上他的~
作为一个新手小白，我也是在前端的道路上不断摸索着。不要因为知识点简单或者不高大上就不去研习，眼光上的盲目会让你的项目摇摇欲坠。以人为戒，以己为戒。