JavaScript比較兩個(gè)日期大小

用場(chǎng)景：校驗(yàn)兩個(gè)日期大小（比如：開(kāi)始日期和結(jié)束日期比較、入職日期和轉(zhuǎn)正日期、合同開(kāi)始日期和合同結(jié)束日期）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>js比較兩個(gè)日期大小--getTime()方法</h2>

    <script>
        let date1='1995-12-02';
        let date2='1995-09-12';
        let startDate=new Date(date1);
        let endDate=new Date(date2);
        // 比較大小
        if(startDate < endDate){
            console.log("我是較大的日期");//date1為較小的日期
        }else{
            console.log("我是較小的日期");
        }
    </script>
    
</body>
</html>

在vue項(xiàng)目中的使用：可以做監(jiān)聽(tīng)form里面的字段也可以做change事件

1.vue監(jiān)聽(tīng)器寫(xiě)法如下：

今的網(wǎng)絡(luò)中，頁(yè)面加載速度是最重要的網(wǎng)站指標(biāo)之一。即使是毫秒也會(huì)對(duì)用戶體驗(yàn)、產(chǎn)品產(chǎn)生巨大影響，而緩慢的頁(yè)面加載會(huì)輕易的的降低轉(zhuǎn)化率。您可以采用許多工具和技術(shù)來(lái)加快網(wǎng)站速度。在本文中，我們將介紹可用于改善前端性能的最佳CSS優(yōu)化技巧。

1.查找性能瓶頸

所有優(yōu)化中最重要的事情是從全面診斷開(kāi)始。幸運(yùn)的是，有許多CSS診斷工具可以幫助您發(fā)現(xiàn)任何性能瓶頸。首先，您可以使用網(wǎng)絡(luò)瀏覽器的DevTools檢查資產(chǎn)加載的速度。在大多數(shù)瀏覽器中，您可以通過(guò)按F12按鈕打開(kāi)DevTools 。

例如，在Firefox DevTools中，可以使用“ 網(wǎng)絡(luò)”選項(xiàng)卡檢查頁(yè)面加載的所有CSS文件的大小和加載時(shí)間。您還可以測(cè)試使用和不使用緩存時(shí)CSS加載的速度。由于DevTools還顯示了外部CSS，例如Google字體文件和從第三方CDN提取的CSS資源，因此您可以找到許多您以前都不知道的資源。

Pingdom Tools和Google提供的Lighthouse是開(kāi)發(fā)人員經(jīng)常用來(lái)分析網(wǎng)站速度和前端性能的另外兩個(gè)免費(fèi)工具。例如，如果您運(yùn)行簡(jiǎn)單的網(wǎng)站速度測(cè)試，則Pingdom Tools會(huì)為您提供一些有用的CSS優(yōu)化技巧。

我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

2.縮小和壓縮CSS文件

大多數(shù)網(wǎng)站都依賴多個(gè)CSS文件。盡管在大多數(shù)情況下，模塊化CSS被認(rèn)為是最佳實(shí)踐，但是加載所有文件可能需要一段時(shí)間。但是，這正是CSS縮小和壓縮工具存在的原因。如果您適當(dāng)?shù)厥褂盟鼈?，則可以大大縮短頁(yè)面加載時(shí)間。

有一些在線工具，例如CSS Minify，可讓您通過(guò)將其復(fù)制粘貼為簡(jiǎn)單形式來(lái)縮小CSS文件的大小。這種類(lèi)型的工具可以與較小的項(xiàng)目很好地配合。但是，對(duì)于帶有多個(gè)CSS文件的大型項(xiàng)目，使用它們會(huì)變得很麻煩且耗時(shí)。在這種情況下，最好選擇自動(dòng)化解決方案。

如今，大多數(shù)構(gòu)建工具可讓您在代碼庫(kù)上自動(dòng)執(zhí)行壓縮。例如，默認(rèn)情況下，Webpack將所有文件作為縮小的包返回。PostCSS還具有諸如CSS Nano之類(lèi)的智能插件，它們不僅可以縮小文件的大小，還可以通過(guò)許多有針對(duì)性的優(yōu)化來(lái)運(yùn)行它。

3.使用Flexbox和CSS網(wǎng)格

如果在編寫(xiě)CSS時(shí)仍僅依靠傳統(tǒng)的框模型，并使用邊距，填充和浮點(diǎn)在屏幕上對(duì)齊項(xiàng)目，則應(yīng)考慮采用更現(xiàn)代的布局模塊，即flexbox和CSS Grid。這些新模型使您可以用更少的代碼來(lái)實(shí)現(xiàn)復(fù)雜的布局。

使用較舊的技術(shù)，您甚至需要進(jìn)行許多技巧和調(diào)整，即使是比較簡(jiǎn)單的事情，例如將項(xiàng)目垂直居中。但是，flexbox和CSS Grid并非如此。盡管拾取新的布局模塊可能要花費(fèi)一些時(shí)間，但還是值得的，因?yàn)镃SS文件要小得多。flexbox尤其如此，到目前為止，flexbox具有相當(dāng)不錯(cuò)的瀏覽器支持（目前全球支持 98.3％）。

盡管瀏覽器對(duì)CSS Grid的支持還不夠完善（目前占全球的92.03％），但如果不必支持舊版瀏覽器或愿意提供后備功能，則仍然可以使用它。

4.使用<link>標(biāo)記代替@import規(guī)則**

您可以使用兩種主要技術(shù)來(lái)使網(wǎng)頁(yè)加載CSS文件：

使用<link>標(biāo)記將它們添加到HTML頁(yè)面的<head>部分，

使用*@import *CSS規(guī)則從其他樣式表導(dǎo)入它們。

您需要將@import規(guī)則添加到主CSS文件的頂部。在大多數(shù)情況下，它用于加載較小的資源，例如字體和其他設(shè)計(jì)元素。最初，這似乎是一個(gè)不錯(cuò)的解決方案，但是，與HTML頁(yè)面使用<link>標(biāo)記直接加載樣式表相比，瀏覽器加載額外的樣式表所花的時(shí)間要長(zhǎng)得多。

當(dāng)您在HTML頁(yè)面中添加多個(gè)CSS文件時(shí)，請(qǐng)務(wù)必注意CSS特殊性。首先添加最通用的樣式表，然后再選擇更具體的樣式表。您需要這樣做，因?yàn)橐院筇砑拥臉邮奖頃?huì)覆蓋以前的CSS文件的規(guī)則。例如，以下示例以正確的順序添加CSS文件時(shí)：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">

5.使用漸變和SVG代替圖像

將所有圖像加載到網(wǎng)頁(yè)上可能要花費(fèi)大量時(shí)間。開(kāi)發(fā)人員使用許多圖像優(yōu)化技術(shù)來(lái)減輕這種影響，例如從外部CDN加載圖像或使用諸如TinyJPG之類(lèi)的圖像壓縮工具。這些解決方案可以提供很多幫助，但是很多時(shí)候，您都可以使用原生CSS效果替換大量資源的JPG和PNG圖像。

例如，您可以使用漸變來(lái)代替背景圖像，而背景圖像可能會(huì)大大降低用戶瀏覽器的速度。您可以使用CSS的漸變功能來(lái)創(chuàng)建線性，徑向和重復(fù)漸變。使用這些CSS原生功能，您不僅可以定義顏色，還可以定義漸變的角度。

例如，以下規(guī)則創(chuàng)建了一個(gè)很好的漸變背景，其加載速度比任何圖像都要快：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

對(duì)于更復(fù)雜的漸變和紋理，還可以使用CSSmatic（在下圖顯示）和ColorZilla這樣的生成器。

除漸變外，您還可以使用可縮放矢量圖形（SVG）替換傳統(tǒng)的JPG和PNG圖像。它們不僅加載速度更快，而且您只需要包含該圖像的一個(gè)版本。這是因?yàn)镾VG由于其向量性質(zhì)而可以按比例放大到任何大小而沒(méi)有任何質(zhì)量損失。此外，您也可以使用CSS設(shè)置SVG的樣式，就像普通的HTML文件一樣。

6.避免重要規(guī)則

盡管！important規(guī)則在某些情況下可能是天賜之物，但您僅應(yīng)將其作為最后的選擇。此規(guī)則從級(jí)聯(lián)中創(chuàng)建一個(gè)異常。因此，當(dāng)您在CSS聲明中添加！important時(shí)，它將覆蓋所有其他聲明，即使是那些具有更高特異性的聲明。它的語(yǔ)法如下所示：

h1{
  margin-bottom: 20px!important;
}

如果CSS中有太多重要規(guī)則，則用戶的瀏覽器將不得不對(duì)代碼進(jìn)行額外的檢查，這可能會(huì)大大降低頁(yè)面速度。根據(jù)經(jīng)驗(yàn)，切勿在整個(gè)站點(diǎn)范圍的CSS或創(chuàng)建主題或插件時(shí)使用！important。如果可能，請(qǐng)僅在要覆蓋來(lái)自第三方庫(kù)的CSS時(shí)使用它。

7.考慮CSS重構(gòu)

盡管CSS重構(gòu)很少是一件容易的事，但在許多情況下，它可以顯著提高網(wǎng)站性能。例如，如果CSS文件太大，或者您繼承了舊版代碼庫(kù)，或者頁(yè)面加載時(shí)間很差，嚴(yán)重?fù)p害了轉(zhuǎn)換率。CSS重構(gòu)的目標(biāo)是使代碼更整潔，更可維護(hù)并且加載更快。

CSS重構(gòu)是一個(gè)多步驟的過(guò)程，在此過(guò)程中，您需要分析CSS代碼庫(kù)的各個(gè)方面。您需要檢查幾件不同的事情，例如：

無(wú)論您有未使用或重復(fù)的CSS規(guī)則或資源，

是否可以利用Flexbox和CSS網(wǎng)格等更現(xiàn)代的技術(shù)，

是否使用過(guò)多的特異性（可以使用此視覺(jué)特異性計(jì)算器進(jìn)行計(jì)算），

CSS文件的結(jié)構(gòu)是否合理（例如，維護(hù)較小的文件比維護(hù)較大的文件更容易），

是否值得使用自動(dòng)構(gòu)建工具，

還有很多其他

在開(kāi)始重構(gòu)之前，還應(yīng)設(shè)置可衡量的目標(biāo)并選擇要使用的基準(zhǔn)，例如頁(yè)面加載時(shí)間或第一個(gè)有意義的繪制，以便您可以比較它們的前后值。

同樣不要忘記使用版本控制工具，例如Git。這樣，如果出現(xiàn)任何問(wèn)題，您可以返回到以前的代碼版本。

包起來(lái)

您可以使用許多CSS優(yōu)化技巧來(lái)改善網(wǎng)站的性能。它們中的大多數(shù)易于實(shí)現(xiàn)，但會(huì)對(duì)頁(yè)面加載時(shí)間產(chǎn)生重大影響。更快的加載頁(yè)面不僅可以增強(qiáng)用戶體驗(yàn)，還可以幫助您在Google和其他搜索引擎中獲得更好的排名。

除了CSS優(yōu)化最佳實(shí)踐之外，您還可以使用許多其他技術(shù)來(lái)提高加載速度，例如緩存，Google AMP和HTTPS協(xié)議。

作者：游X魚(yú)
鏈接：https://www.jianshu.com/p/69198ac60e53

題，就像題目說(shuō)的需要計(jì)算出時(shí)間差，雖然不太難，但這個(gè)需求經(jīng)常會(huì)在項(xiàng)目中遇到的，我在這邊做一下整理，希望能夠盡量全的整理出來(lái)。有需要的朋友可以做一下參考，喜歡的可以點(diǎn)波贊，或者關(guān)注一下，希望可以幫到大家。

分享之前我先推薦下我自己的web前端學(xué)習(xí)交流群：675498134，不管你是小白還是大神，我都?xì)g迎你們進(jìn)群交流，不定期分享干貨，包括我自己整理的最新的前端資料和教程送給大家，歡迎初學(xué)和進(jìn)階中的小伙伴，一起學(xué)習(xí)一起交流，共同進(jìn)步。

計(jì)算時(shí)間差原理：

getTime()方法

方法定義： getTime() 方法可返回距 1970 年 1 月 1 日之間的毫秒數(shù)。

通常我們計(jì)算時(shí)間差都是通過(guò)獲取兩個(gè)時(shí)間數(shù)據(jù)，然后分別使用getTime（）方法返回與固定的1970 年 1 月 1 日的時(shí)間差，通過(guò)對(duì)返回毫秒數(shù)的差，換算成時(shí)間單位，得出兩個(gè)時(shí)間的時(shí)間差。

開(kāi)始操作：

首先你會(huì)有一串初始的時(shí)間數(shù)據(jù)，然后通過(guò) new Date(你的時(shí)間數(shù)據(jù))，將你的數(shù)據(jù)轉(zhuǎn)成Date對(duì)象的形式。

 var t1="2017/08/28 04:56:38"; //數(shù)據(jù)
 var dateBegin=new Date(t1);//轉(zhuǎn)化為Date對(duì)象的形式
 //Mon Aug 28 2017 04:56:38 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 這里就是Date對(duì)象的數(shù)據(jù)形式

時(shí)間格式

這里的話就要注意一下后端給的時(shí)間數(shù)據(jù)格式的問(wèn)題，比如下面兩種：

 第一種："2017/08/28 04:56:38"http://這種格式不用再進(jìn)行處理
 第二種："2017-08-01 18:56:38"http://這種格式就要進(jìn)行處理

因?yàn)閚ew Date()方法不能處理第二種數(shù)據(jù)，所以我們這里需要將第二種數(shù)據(jù)格式轉(zhuǎn)化為第一種數(shù)據(jù)的格式。

 var t1="2017-05-12 00:13:53";
 var dateBegin=new Date(d1.replace(/-/g, "/"));//replace方法將-轉(zhuǎn)為/

不知道大家是什么情況，反正因?yàn)槲覀兒蠖私o我的數(shù)據(jù)就是第二種的，所以我會(huì)提一下這個(gè)東西（捂臉）。

另一個(gè)時(shí)間數(shù)據(jù):

既然是時(shí)間差的話，就肯定要有兩個(gè)數(shù)據(jù)，不然怎么兩相比較，一般兩個(gè)數(shù)據(jù)中都會(huì)有一個(gè)當(dāng)前時(shí)間的數(shù)據(jù)。

 var dateEnd=new Date();//當(dāng)前時(shí)間數(shù)據(jù)

完整計(jì)算時(shí)間差(天、小時(shí)、分鐘、秒)的代碼：

先獲取之間的毫秒差，通過(guò)毫秒差換算出你所需要的時(shí)間單位，然后時(shí)間單位之間的換算根據(jù)的是他們的倍數(shù)關(guān)系。

function timeFn(d1) {//di作為一個(gè)變量傳進(jìn)來(lái)
 //如果時(shí)間格式是正確的，那下面這一步轉(zhuǎn)化時(shí)間格式就可以不用了
 var dateBegin=new Date(d1.replace(/-/g, "/"));//將-轉(zhuǎn)化為/，使用new Date
 var dateEnd=new Date();//獲取當(dāng)前時(shí)間
 var dateDiff=dateEnd.getTime() - dateBegin.getTime();//時(shí)間差的毫秒數(shù)
 var dayDiff=Math.floor(dateDiff / (24 * 3600 * 1000));//計(jì)算出相差天數(shù)
 var leave1=dateDiff%(24*3600*1000) //計(jì)算天數(shù)后剩余的毫秒數(shù)
 var hours=Math.floor(leave1/(3600*1000))//計(jì)算出小時(shí)數(shù)
 //計(jì)算相差分鐘數(shù)
 var leave2=leave1%(3600*1000) //計(jì)算小時(shí)數(shù)后剩余的毫秒數(shù)
 var minutes=Math.floor(leave2/(60*1000))//計(jì)算相差分鐘數(shù)
 //計(jì)算相差秒數(shù)
 var leave3=leave2%(60*1000) //計(jì)算分鐘數(shù)后剩余的毫秒數(shù)
 var seconds=Math.round(leave3/1000)
 console.log(" 相差 "+dayDiff+"天 "+hours+"小時(shí) "+minutes+" 分鐘"+seconds+" 秒")
 console.log(dateDiff+"時(shí)間差的毫秒數(shù)",dayDiff+"計(jì)算出相差天數(shù)",leave1+"計(jì)算天數(shù)后剩余的毫秒數(shù)"
 ,hours+"計(jì)算出小時(shí)數(shù)",minutes+"計(jì)算相差分鐘數(shù)",seconds+"計(jì)算相差秒數(shù)");
}
var t3="2017-08-18 04:56:38";
timeFn(t3);

demo時(shí)間差數(shù)據(jù)截圖

不成熟的計(jì)算月、年:

 //這里的dayDiff就是上文計(jì)算出的天數(shù)差
 let monthDiff=Math.floor(dayDiff/30);//以30天為一個(gè)月不夠精準(zhǔn)嚴(yán)謹(jǐn)
 //獲取相差的月份
 if (monthDiff<12){
 timeThis=monthDiff+"個(gè)月前發(fā)布";//獲取相差的月份
 return
 }
 let yearDiff=Math.floor(monthDiff/12);//獲取相差的年份
 if(yearDiff>=1){
 timeThis=yearDiff+"年前發(fā)布";
 return
 }

當(dāng)天數(shù)相差較大的時(shí)候，單純計(jì)算天數(shù)已經(jīng)不能滿足需求了，因?yàn)槲覀働M說(shuō)的統(tǒng)一以30天為一個(gè)月的分界線，然后這里月份的計(jì)算情況感覺(jué)很復(fù)雜的樣子沒(méi)有繼續(xù)研究下去。

獲取當(dāng)前月份的天數(shù)

 function getDays() {
 //構(gòu)造當(dāng)前日期對(duì)象
 var date=new Date();
 var year=date.getFullYear();//獲取年份
 var mouth=date.getMonth() + 1;//獲取當(dāng)前月份
 var days;//定義當(dāng)月的天數(shù)；
 if (mouth==2) {//當(dāng)月份為二月時(shí)，根據(jù)閏年還是非閏年判斷天數(shù)
 days=year % 4==0 ? 29 : 28;
 }
 else if (mouth==1 || mouth==3 || mouth==5 || mouth==7 || mouth==8 || mouth==10 || mouth==12) {
 //月份為：1,3,5,7,8,10,12 時(shí)，為大月.則天數(shù)為31；
 days=31;
 }
 else {
 //其他月份，天數(shù)為：30.
 days=30;
 }
 return days;
 }

網(wǎng)上找了個(gè)獲取當(dāng)前月份天數(shù)的函數(shù)，上面的注釋也足夠全，我就一起貼上來(lái)，連接在下面。

后話

上面就是本文計(jì)算時(shí)間差的內(nèi)容了，希望看完本文能給大家一點(diǎn)幫助。最后一個(gè)提示：一般需要處理的數(shù)據(jù)不會(huì)只有一兩個(gè)，很可能會(huì)給一個(gè)數(shù)組，你需要處理每個(gè)數(shù)組元素的時(shí)間數(shù)據(jù)，這時(shí)候建議用forEach()函數(shù)遍歷整個(gè)數(shù)組。

如果覺(jué)得我的文章對(duì)您有用，請(qǐng)點(diǎn)贊收藏。您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作。

知識(shí)分享到這里就結(jié)束了，web前端學(xué)習(xí)的可以來(lái)我的群，群里每天都有對(duì)應(yīng)資料學(xué)習(xí)：675498134，歡迎初學(xué)和進(jìn)階中的小伙伴。

在線咨詢

上一篇：學(xué)習(xí)CSS的正確打開(kāi)方式：8款游戲帶你學(xué)習(xí)CSS
下一篇：c#使用webView2 訪問(wèn)本地靜態(tài)html資源跨

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript比較兩個(gè)日期大小

用場(chǎng)景：校驗(yàn)兩個(gè)日期大小（比如：開(kāi)始日期和結(jié)束日期比較、入職日期和轉(zhuǎn)正日期、合同開(kāi)始日期和合同結(jié)束日期）

在vue項(xiàng)目中的使用：可以做監(jiān)聽(tīng)form里面的字段 也可以做change事件

您的項(xiàng)目需求

用場(chǎng)景：校驗(yàn)兩個(gè)日期大小（比如：開(kāi)始日期和結(jié)束日期比較、入職日期和轉(zhuǎn)正日期、合同開(kāi)始日期和合同結(jié)束日期）

在vue項(xiàng)目中的使用：可以做監(jiān)聽(tīng)form里面的字段也可以做change事件