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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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
adodb与adodb_lite之比较
2006/12/31 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
详解vue 命名视图
2019/08/14 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python os.rename实例用法详解
2020/12/06 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
微型企业创业投资计划书
2014/01/10 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
初中政治教学工作总结
2015/08/13 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
python解析照片拍摄时间进行图片整理
2022/07/23 Python