摘要:入門(mén)系列之時(shí)間及時(shí)間戳?xí)r間及時(shí)間戳?xí)r間及時(shí)間戳是里面很常見(jiàn)的一個(gè)概念,在我們寫(xiě)前端頁(yè)面的時(shí)候,經(jīng)常會(huì)遇到需要獲取當(dāng)前時(shí)間的情況,所以,了解中的時(shí)間概念非常重要。
js入門(mén)系列之
時(shí)間及時(shí)間戳是js里面很常見(jiàn)的一個(gè)概念,在我們寫(xiě)前端頁(yè)面的時(shí)候,經(jīng)常會(huì)遇到需要獲取當(dāng)前時(shí)間的情況,所以,了解js中的時(shí)間概念非常重要。而時(shí)間戳是指格林威治時(shí)間1970年01月01日00時(shí)00分00秒(北京時(shí)間1970年01月01日08時(shí)00分00秒)起至現(xiàn)在的總秒數(shù),在關(guān)于時(shí)間的計(jì)算中也起著不可替代的作用。下面我們通過(guò)代碼來(lái)認(rèn)識(shí)一下他們。首先,我們先通過(guò)代碼獲取當(dāng)前時(shí)間:
var time=new Date(); var timeTamp=time.getTime(); text.innerHTML="time:"+time+" timeTamp:"+timeTamp;
如圖所示,我們所得到的time就是js中Date對(duì)象的實(shí)例,在不添加任意參數(shù)的情況下我們可以得到當(dāng)前的時(shí)間,而通過(guò)getTime我們可以把Date實(shí)例轉(zhuǎn)化為時(shí)間戳。通過(guò)代碼運(yùn)行結(jié)果我們可以看到,time一般是一個(gè)字符串,而timeTamp則是一個(gè)純數(shù)字,所以我們一般把time用來(lái)顯示,而把timeTamp用來(lái)計(jì)算~
既然提到了時(shí)間,那么肯定關(guān)系到了時(shí)間上的計(jì)算。先不急,我們先來(lái)熟悉一下關(guān)于Date對(duì)象的函數(shù),常見(jiàn)的有g(shù)etFullYear,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;
從圖中我們可以看到關(guān)于時(shí)間的每部分我們都可以多帶帶得出,使得后續(xù)時(shí)間計(jì)算尤為方便。提示一下:多帶帶返回的月份是從0開(kāi)始算的,結(jié)果中返回了4,也就是代表是五月。那么既然有g(shù)et方法,就有對(duì)應(yīng)的set方法,這里小編只介紹setFullYear方法,其他的就讓讀者們自己去挖掘把。
var time=new Date(); var timeTamp=time.getTime(); time.setFullYear(2018,4,20); text.innerHTML="time:"+time;
setFullYear可以幫我們將time設(shè)定為我們期待的時(shí)間,這在實(shí)際中是非常實(shí)用的,尤其是寫(xiě)倒計(jì)時(shí)之類(lèi)的demo。相似的還有parse函數(shù),只不過(guò)它返回的是指定時(shí)間的時(shí)間戳,這兩個(gè)函數(shù)各有所用之地,作用相似:
var toTamp=Date.parse("12 19,2015"); text.innerHTML="toTamp:"+toTamp;
下面我們利用現(xiàn)有的函數(shù)寫(xiě)一個(gè)倒計(jì)時(shí),是到2018-5-20號(hào)的:
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剩余時(shí)間還有:
"+oyear+"年"+omonth+"月"+odate+"天"+ohour+"時(shí)"+ominute+"分"+osecond+"秒"; },1000);
這是一個(gè)十分簡(jiǎn)易的倒計(jì)時(shí),但是所用到的代碼確實(shí)不多而且簡(jiǎn)潔,雖然不一定是最精確的,但是應(yīng)該算是最簡(jiǎn)單的一種方法了。而當(dāng)你為這個(gè)倒計(jì)時(shí)加上酷炫的特效時(shí),我想你會(huì)喜歡上他的~
作為一個(gè)新手小白,我也是在前端的道路上不斷摸索著。不要因?yàn)橹R(shí)點(diǎn)簡(jiǎn)單或者不高大上就不去研習(xí),眼光上的盲目會(huì)讓你的項(xiàng)目搖搖欲墜。以人為戒,以己為戒。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51790.html
摘要:入門(mén)系列之時(shí)間及時(shí)間戳?xí)r間及時(shí)間戳?xí)r間及時(shí)間戳是里面很常見(jiàn)的一個(gè)概念,在我們寫(xiě)前端頁(yè)面的時(shí)候,經(jīng)常會(huì)遇到需要獲取當(dāng)前時(shí)間的情況,所以,了解中的時(shí)間概念非常重要。 js入門(mén)系列之 時(shí)間及時(shí)間戳 時(shí)間及時(shí)間戳 時(shí)間及時(shí)間戳是js里面很常見(jiàn)的一個(gè)概念,在我們寫(xiě)前端頁(yè)面的時(shí)候,經(jīng)常會(huì)遇到需要獲取當(dāng)前時(shí)間的情況,所以,了解js中的時(shí)間概念非常重要。而時(shí)間戳是指格林威治時(shí)間1970年01月0...
摘要:基礎(chǔ)問(wèn)題的的性能及原理之區(qū)別詳解備忘筆記深入理解流水線抽象關(guān)鍵字修飾符知識(shí)點(diǎn)總結(jié)必看篇中的關(guān)鍵字解析回調(diào)機(jī)制解讀抽象類(lèi)與三大特征時(shí)間和時(shí)間戳的相互轉(zhuǎn)換為什么要使用內(nèi)部類(lèi)對(duì)象鎖和類(lèi)鎖的區(qū)別,,優(yōu)缺點(diǎn)及比較提高篇八詳解內(nèi)部類(lèi)單例模式和 Java基礎(chǔ)問(wèn)題 String的+的性能及原理 java之yield(),sleep(),wait()區(qū)別詳解-備忘筆記 深入理解Java Stream流水...
摘要:基礎(chǔ)問(wèn)題的的性能及原理之區(qū)別詳解備忘筆記深入理解流水線抽象關(guān)鍵字修飾符知識(shí)點(diǎn)總結(jié)必看篇中的關(guān)鍵字解析回調(diào)機(jī)制解讀抽象類(lèi)與三大特征時(shí)間和時(shí)間戳的相互轉(zhuǎn)換為什么要使用內(nèi)部類(lèi)對(duì)象鎖和類(lèi)鎖的區(qū)別,,優(yōu)缺點(diǎn)及比較提高篇八詳解內(nèi)部類(lèi)單例模式和 Java基礎(chǔ)問(wèn)題 String的+的性能及原理 java之yield(),sleep(),wait()區(qū)別詳解-備忘筆記 深入理解Java Stream流水...
閱讀 2406·2021-11-18 10:02
閱讀 1922·2021-10-13 09:40
閱讀 2999·2021-09-07 10:07
閱讀 2106·2021-09-04 16:48
閱讀 1005·2019-08-30 13:18
閱讀 2452·2019-08-29 14:03
閱讀 2922·2019-08-29 12:54
閱讀 3155·2019-08-26 11:41