您的位置:首页 > Web前端 > JavaScript

前台获取时间差--兼容那些事

2016-10-09 20:23 183 查看
    前段时间,客户提出需求,根据输入的时间段,自动获取时间差。当时没有想太多,直接使用了前台的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 !!! 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js IE兼容