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 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue自定义指令directive实例详解
Jan 17 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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 图片上传类代码
2009/07/17 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
实习期自我鉴定
2013/10/11 职场文书
迟到检讨书1000字
2014/01/15 职场文书
高级工程师英文求职信
2014/03/19 职场文书
2015大学生实训报告
2014/11/05 职场文书
个人自荐书范文
2015/03/09 职场文书
社区活动总结范文
2015/05/07 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server