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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
js简单抽奖代码
Jan 16 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue实现计步器功能
2019/11/01 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
js判断密码强度的方法
2020/03/18 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
flask实现验证码并验证功能
2019/12/05 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
文案策划岗位职责
2015/02/11 职场文书