javascript中日期函数new Date()的浏览器兼容性问题


Posted in Javascript onSeptember 05, 2015

同一种语言javascript,在不同的浏览器中,存在语言兼容性问题,本质上是由于不同的浏览器是支持的语言标准和实现上各有差异。本文将基于new Date来创建Date对象来分析这个问题。

1.  问题的提出, 开始时间和结束时间空间无法正确的传递值

    在页面中,我们使用了一个时间上的组件来开发时间选择框,但是发现在Firefox下是无法正常工作的,在Chrome下是可以正常运行的。 问题出在哪里呢?

2.  问题分析

    结果分析发现是由于如下代码产生的问题:  

var timestart = '2010-05-04';
var timeend = '2015-09-05';
var time1 = (timestart+' 00:00:00').toString();
var time2 = (timeend+' 23:59:59').toString();
timestart = new Date(time1);
timeend = new Date(time2);

  问题就在于 new Date(time1)这个构造函数无法正确的生成Date对象,其值为NaN. 怪哉,问题在哪里呢?

3. 各个浏览器上的表现

  在IE下的执行情况:

  javascript中日期函数new Date()的浏览器兼容性问题

 在Firefox下的执行情况:

  javascript中日期函数new Date()的浏览器兼容性问题  在Chrome下的执行情况:

   javascript中日期函数new Date()的浏览器兼容性问题

    通过以上的分析,可以得知,这个javascript的脚本在Chrome下是可以正确执行的,但是在其他浏览器下报出错误。

4. 正确的做法

以下列出正确的做法:

var time1 = (timestart+' 00:00:00').toString();
 var time2 = (timeend+' 23:59:59').toString();
 timestart = new Date(Date.parse(time1.replace(/-/g,"/"))).getTime();
 timeend = new Date(Date.parse(time2.replace(/-/g,"/"))).getTime();

主要的变化是对默认的日期格式进行了转换, 基于'/'格式的日期字符串,才是被各个浏览器所广泛支持的,‘-'连接的日期字符串,则是只在chrome下可以正常工作。

5. 知识点总结

'2015-09-05'是无法被各个浏览器中,使用new Date(str)来正确生成日期对象的。 正确的用法是'2015/09/06'.

Javascript 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JsDom 编程小结
Aug 09 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 #Javascript
javascript 判断两个日期之差的示例代码
Sep 05 #Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 #Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 #Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 #Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 #Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 #Javascript
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
js函数调用的方式
2014/05/06 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
javascript数据类型详解
2017/02/07 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python实现多线程抓取知乎用户
2016/12/12 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python进行两个表格对比的方法
2018/06/27 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python中的Cookie模块如何使用
2020/06/04 Python
基于keras中的回调函数用法说明
2020/06/17 Python
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
英文自我鉴定
2013/12/10 职场文书
捐款倡议书
2014/04/14 职场文书
小班评语大全
2014/05/04 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
给上级领导的感谢信
2015/01/22 职场文书
预备党员入党感言
2015/08/01 职场文书
汽车车尾标语大全
2015/08/11 职场文书