国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js筆記系列之--時間及時間戳

wapeyang / 1943人閱讀

摘要：入門系列之時間及時間戳時間及時間戳時間及時間戳是里面很常見的一個概念，在我們寫前端頁面的時候，經常會遇到需要獲取當前時間的情況，所以，了解中的時間概念非常重要。

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+" 
timeTamp:"+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+"
timeTamp:"+timeTamp+"
year:"+year+"
month:"+month+"
date:"+date+"
hour:"+hour+"
minute:"+minute+"
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剩余時間還有：
"+oyear+"年"+omonth+"月"+odate+"天"+ohour+"時"+ominute+"分"+osecond+"秒";
},1000);

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107137.html

相關文章

  • js筆記系列之--時間及時間戳

    摘要：入門系列之時間及時間戳時間及時間戳時間及時間戳是里面很常見的一個概念，在我們寫前端頁面的時候，經常會遇到需要獲取當前時間的情況，所以，了解中的時間概念非常重要。 js入門系列之 時間及時間戳 時間及時間戳 時間及時間戳是js里面很常見的一個概念，在我們寫前端頁面的時候，經常會遇到需要獲取當前時間的情況，所以，了解js中的時間概念非常重要。而時間戳是指格林威治時間1970年01月0...

    paulli3 評論0 收藏0

  • 后臺開發常問面試題集錦（問題搬運工，附鏈接）

    摘要：基礎問題的的性能及原理之區別詳解備忘筆記深入理解流水線抽象關鍵字修飾符知識點總結必看篇中的關鍵字解析回調機制解讀抽象類與三大特征時間和時間戳的相互轉換為什么要使用內部類對象鎖和類鎖的區別，，優缺點及比較提高篇八詳解內部類單例模式和 Java基礎問題 String的+的性能及原理 java之yield(),sleep(),wait()區別詳解-備忘筆記 深入理解Java Stream流水...

    spacewander 評論0 收藏0

  • 后臺開發常問面試題集錦（問題搬運工，附鏈接）

    摘要：基礎問題的的性能及原理之區別詳解備忘筆記深入理解流水線抽象關鍵字修飾符知識點總結必看篇中的關鍵字解析回調機制解讀抽象類與三大特征時間和時間戳的相互轉換為什么要使用內部類對象鎖和類鎖的區別，，優缺點及比較提高篇八詳解內部類單例模式和 Java基礎問題 String的+的性能及原理 java之yield(),sleep(),wait()區別詳解-備忘筆記 深入理解Java Stream流水...

    xfee 評論0 收藏0

發表評論

0條評論

wapeyang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<