JS計算兩個時間間隔

phoenixsky 發布于2019-08-23 17:08 / 1396人閱讀

摘要：前言業務場景計算兩個時間相隔了多少年多少月多少日。實現原理獲取當前時間若需要和當前時間比較，這里提供當前時間的獲取格式化方法。比較時間的時候，若為小的時間，這里直接返回。

1 前言 1.1 業務場景

JavaScript計算兩個時間相隔了多少年多少月多少日。時分秒這里不作考慮。

2 實現原理 2.1 獲取當前時間

若需要和當前時間比較，這里提供當前時間的獲取格式化方法。我這里是根據傳入類型輸出日期或者日期+時間，可以明顯看出type為day時，輸出日期。

getNowDate(type){
    let now = new Date()
    let year = now.getFullYear()
    let month = now.getMonth() + 1
    let day = now.getDate()
    let hh = now.getHours()
    let mm = now.getMinutes()
    let ss = now.getSeconds()

    month = month < 10 ? "0"+ month : month
    day = day < 10 ? "0"+ day : day

    if(type == "day"){
      return year +"-"+ month +"-"+ day
    } else {
      return year +"-"+ month +"-"+ day + " "+ hh + ":" + mm + ":" + ss
    }
},

2.2比較時間

傳入兩個參數，格式如：2008-08-08

getDiffYmdBetweenDate(sDate1,sDate2){
    var fixDate = function(sDate){
        var aD = sDate.split("-");
        for(var i = 0; i < aD.length; i++){
            aD[i] = fixZero(parseInt(aD[i]));
        }
        return aD.join("-");
    };
      
    var fixZero = function(n){
        return n < 10 ? "0"+n : n;
    };
      
    var fixInt = function(a){
        for(var i = 0; i < a.length; i++){
            a[i] = parseInt(a[i]);
        }
        return a;
    };
      
    var getMonthDays = function(y,m){
        var aMonthDays = [0,31,28,31,30,31,30,31,31,30,31,30,31];
        if((y%400 == 0) || (y%4==0 && y%100!=0)){
            aMonthDays[2] = 29;
        }
        return aMonthDays[m];
    };
      
    var checkDate = function(sDate){
    };
    var y = 0;
    var m = 0;
    var d = 0;
    var sTmp;
    var aTmp;
    sDate1 = fixDate(sDate1);
    sDate2 = fixDate(sDate2);
    if(sDate1 > sDate2){
        return "past"
    }
    var aDate1 = sDate1.split("-");
    aDate1 = fixInt(aDate1);
    var aDate2 = sDate2.split("-");
    aDate2 = fixInt(aDate2);
    //計算相差的年份
    /*aTmp = [aDate1[0]+1,fixZero(aDate1[1]),fixZero(aDate1[2])];
    while(aTmp.join("-") <= sDate2){
        y++;
        aTmp[0]++;
    }*/
    y = aDate2[0] - aDate1[0];
    if( sDate2.replace(aDate2[0],"") < sDate1.replace(aDate1[0],"")){
        y = y - 1;
    }
    //計算月份
    aTmp = [aDate1[0]+y,aDate1[1],fixZero(aDate1[2])];
    while(true){
        if(aTmp[1] == 12){
            aTmp[0]++;
            aTmp[1] = 1;
        }else{
            aTmp[1]++;
        }
        if(([aTmp[0],fixZero(aTmp[1]),aTmp[2]]).join("-") <= sDate2){
            m++;
        } else {
            break;
        }
    }
    //計算天數
    aTmp = [aDate1[0]+y,aDate1[1]+m,aDate1[2]];
    if(aTmp[1] > 12){
        aTmp[0]++;
        aTmp[1] -= 12;
    }
    while(true){
        if(aTmp[2] == getMonthDays(aTmp[0],aTmp[1])){
            aTmp[1]++;
            aTmp[2] = 1;
        } else {
            aTmp[2]++;
        }
        sTmp = ([aTmp[0],fixZero(aTmp[1]),fixZero(aTmp[2])]).join("-");
        if(sTmp <= sDate2){
            d++;
        } else {
            break;
        }
    }
    return {y:y,m:m,d:d}
},

返回的結果是一個對象，包含了y m d三個屬性，可根據業務進行取用展示。

比較時間的時候，若sDate1為小的時間，這里直接返回past。

2.3 頁面展示

這里根據業務不同可以作不同的展示。這里列出自己的Vue展示處理展示。

其中this.dataForm.hasdata為頁面的v-model。這樣的處理的效果是觀看直觀。

let now = this.getNowDate("day")
let diffDate = this.getDiffYmdBetweenDate(now,this.data)
let hasdata = ""

if(diffDate == "past"){
    this.dataForm.hasdata = "已過期"
} else {
    if(diffDate.y > 0){
        hasdata += diffDate.y + "年" + diffDate.m + "月"
    } else if (diffDate.y == 0) {
        if(diffDate.m > 0){
            hasdata += diffDate.m + "月"
        }
    }
    this.dataForm.hasdata = hasdata + diffDate.d + "日"
}

2.4 頁面效果

3 后記

感謝支持。若不足之處，歡迎大家指出，共勉。

如果覺得不錯，記得點贊，謝謝大家

GPU云服務器云服務器計算時間間隔時間間隔自動計算 js計時時間間隔計算兩個時間差

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

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

setTimeout與setInterval的區別和nodejs中的差異

摘要：關于定時器的源碼在文件中，進入就關于定時器的一些設計解釋，因為是做服務端代碼，在內部等大部分事件都會創建一個定時器，任何時間都可能存在大量的定時器任務，所以設計一個高效的定時器是很有必要的。博客文章地址 setTimeout與setInterval setTimeout 和 setInterval 是我們在 javaScript 中經常用到的定時器,setTimeout 方法用于...

meislzhua 2019-08-21 16:52 評論0 收藏0
【前端優化】動畫幾種實現方式總結和性能分析

摘要：備注沒整理格式，抱歉動畫實現的幾種方式性能排序實現方式自身調用調用的定時器值推薦最小使用的原因即每秒幀為什么倒計時動畫一定要用而避免使用兩者區別及引發的線程討論線程討論為什么單線程是的一大特性。備注：沒整理格式，抱歉動畫實現的幾種方式：性能排序js < requestAnimationFrame 3->4->2. 那么在來看你這段代碼。 var t = true; window...

IamDLY 2019-08-23 15:35 評論0 收藏0
JS高級定時器

摘要：高級定時器高級技巧異步首先，中沒有代碼是立即執行的，而是一旦進程空閑則立即執行。針對第二種問題，使用定時器是解決方法之一。為定時器設定的時間間隔使得進程有時間在處理項目的事件之間轉入空閑。該函數首先清除之前設置的任何定時器。 title: 高級定時器 date: 2016-12-13 tag: JS高級技巧 0x00 異步首先，JavaScript 中沒有代碼是立即執行的，...

leeon 2019-08-22 10:50 評論0 收藏0
【源碼分析】給你幾個鬧鐘，或許用 10 分鐘就能寫出 lodash 中的 debounce &

摘要：最簡單的案例以最簡單的情景為例在某一時刻點只調用一次函數，那么將在時間后才會真正觸發函數。后續我們會逐漸增加黑色鬧鐘出現的復雜度，不斷去分析紅色鬧鐘的位置。序相比網上教程中的 debounce 函數，lodash 中的 debounce 功能更為強大，相應的理解起來更為復雜；解讀源碼一般都是直接拿官方源碼來解讀，不過這次我們采用另外的方式：從最簡單的場景開始寫代碼，然后慢慢往源碼...

余學文 2019-08-26 10:19 評論0 收藏0
React16性能改善的原理一

摘要：接下來看下偽代碼調度算法偽代碼原來這段寫的匆忙且不好，重新更新了一篇講調度算法的大概實現性能改善的原理二。問題背景 React16 更新了底層架構，新架構主要解決更新節點過多時，頁碼卡頓的問題。譬如如下代碼，根據用戶輸入的文字生成10000行數據，用戶輸入框會出現卡頓現象。 class App extends React.Component { constructor( prop...

zhangqh 2019-08-23 15:21 評論0 收藏0