zoukankan      html  css  js  c++  java
  • 前台获取时间差--兼容那些事

        前段时间,客户提出需求,根据输入的时间段,自动获取时间差。当时没有想太多,直接使用了前台的js的getTime()方法实现了该功能,测试的时候也没有发现问题。但是,用户使用的时候,bug就来了。用户填入开始时间和结束时间后,时间差没有自动计算。

        由于出现过类似的问题,用户无法使用,本地测试没有问题,首先考虑的就是兼容性问题。由于用户电脑的IE版本大部分是IE8,个别的是IE7,而本地是IE10以上,这就导致了兼容性上出现了问题。

        首先看一下之前的获取时间差的代码:      

    <span style="font-size:18px;">   </span><span style="font-size:24px;">  var ps = $("#INFLU_BEGIN_DATE").val();
        var pe = $("#INFLU_END_DATE").val();
        if (ps != "" && pe != "") {
    
            //测试一
            var pss = new Date(ps);
            var pee = new Date(pe);
            var ptimes = pee.getTime() - pss.getTime();
            var pdays = Math.floor(ptimes / (24 * 3600 * 1000));
    
            data["INFLU_DAYS"] = pdays;
        }</span>

        js中getTime()是获取当前时间的毫秒数,先通过new Date转换时间格式,然后获取两时间的毫秒差,最后转换成天数,IE10 以上可以支持new Date()转换和getTime,但是遇到IE8及以下,就不适用了。

       找到出现问题的原因之后,解决起来就容易多了。

       方法一:     

    <span style="font-size:24px;">function DateDiff(sDate1, sDate2) {    //sDate1和sDate2是2002-12-18格式  
        var aDate, oDate1, oDate2, iDays
        aDate = sDate1.split("-")
        oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])    //转换为12-18-2002格式  
        aDate = sDate2.split("-")
        oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
        iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24)    //把相差的毫秒数转换为天数  
        return iDays
    };</span>

          定义一个时间格式转换的函数,每次只需要调用该函数,就可以得到所需要的时间差。其实,该函数的思路跟之前的方案是一样的,不同之处 就在于增加了时间格式的处理,将时间拆分成数组,然后在重新组装成低版本IE可以识别的转换格式,最终实现转换

         

        方法二:      

    <span style="font-size:18px;">      </span><span style="font-size:24px;">var pss = new Date(Date.parse(ps.replace(/-/g, "/")));
         var pee = new Date(Date.parse(pe.replace(/-/g, "/")));
         var ptimes = pee.getTime() - pss.getTime();
         var pdays1 = Math.floor(ptimes / (24 * 3600 * 1000));</span>
        在各版本的IE中,可以支持'yyyy/MM/dd'形式的时间格式,这样的话,只需要将前台的时间格式转换成此类型即可。(当然也可以在使用日期控件时,直接转换


        小结:

           通过此事看出自己的思想还有待提高,只看到了眼前功能的实现,却没有考虑到浏览器兼容性的问题。所以,此问题中最大的收获并不是解决了问题,而是在这个过程中,提升了自己的思想认识,this is more important !!! 

  • 相关阅读:
    wqs二分
    FLAG区
    Codeforces | CF1033D 【Divisors】
    Nowcoder | [题解-N210]牛客OI月赛2-提高组
    Codeforces | CF1041F 【Ray in the tube】
    Nowcoder | [题解-N189]牛客OI赛制测试赛3
    Codeforces | CF1029F 【Multicolored Markers】
    Codeforces | CF1037D 【Valid BFS?】
    Codeforces | CF1028C 【Rectangles】
    Codeforces | CF1029C 【Maximal Intersection】
  • 原文地址:https://www.cnblogs.com/victor-grace/p/7253651.html
Copyright © 2011-2022 走看看