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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
原生js实现自定义滚动条
Jan 20 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实现与ASP Banner组件相似的类
2006/10/09 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php中的静态变量的基本用法
2014/03/20 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
Yii框架form表单用法实例
2014/12/04 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
Python是编译运行的验证方法
2015/01/30 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python ubplot使用方法解析
2020/01/10 Python
python右对齐的实例方法
2020/07/05 Python
家长寄语大全
2014/04/02 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
助学感谢信范文
2015/01/21 职场文书
自我工作评价范文
2015/03/06 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python