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 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
JQuery datepicker 使用方法
May 20 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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/02/16 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python os.access()用法实例
2019/02/18 Python
python实现图片转字符小工具
2019/04/30 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python实现随机加减法生成器
2020/02/24 Python
python如何编写win程序
2020/06/08 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
初中地理教学反思
2014/01/11 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
物业管理工作方案
2014/05/10 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
详细了解MVC+proxy
2021/07/09 Java/Android