JS计算两个时间间隔

phoenixsky 发布于2019-08-23 17:08 / 1385人阅读

摘要：前言业务场景计算两个时间相隔了多少年多少月多少日。实现原理获取当前时间若需要和当前时间比较，这里提供当前时间的获取格式化方法。比较时间的时候，若为小的时间，这里直接返回。

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计时时间间隔计算两个时间差

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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