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

這是一個十分簡易的倒計時，可是所用到的代碼確實很少並且簡潔，雖然不必定是最精確的，可是應該算是最簡單的一種方法了。而當你爲這個倒計時加上酷炫的特效時，我想你會喜歡上他的~
做爲一個新手小白，我也是在前端的道路上不斷摸索着。不要由於知識點簡單或者不高大上就不去研習，眼光上的盲目會讓你的項目風雨飄搖。以人爲戒，以己爲戒。