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);

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