前台获取时间差--兼容那些事
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 !!!
由于出现过类似的问题,用户无法使用,本地测试没有问题,首先考虑的就是兼容性问题。由于用户电脑的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 FF)
- JS代码获取当前日期时支持IE,不兼容FF和chrome,解决这个问题,我们需要把获取时间的getYear()函数换成getFullYear()
- SpringMVC在后台获取前台输入的时间
- VBS中获取系统本次及上次开关机时间的代码(WinXP/win2003/Win7兼容版)
- 项目中获取服务器端时间在前台显示
- list集合转为json,前台ajax获取时间数据并格式化
- 解决小程序中Data.parse()获取时间戳IOS不兼容
- 兼容多平台的,高性能的,获取14位时间字符串,时间差的shell命令
- C++ 获取当前时间毫秒数(兼容windows和linux)
- 兼容IE、firefox以及chrome的js获取时间(getFullYear)
- 兼容IE、firefox以及chrome的js获取时间(getFullYear)
- 解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)
- JS时间处理,获取天时分秒。以及浏览器出现的不兼容问题
- JS代码获取当前日期时支持IE,不兼容FF和chrome,解决这个问题,我们需要把获取时间的getYear()函数换成getFullYear()
- php+ajax 前台页面获取标准网络时间
- 解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)
- 兼容FireFox 的 js 日历 支持时间的获取
- 通过JS获取前台当前系统时间
- 求助:关于后台获取时间,前台显示倒计时的问题
- JS获取时间戳兼容问题