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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
Vue如何实现变量表达式选择器
Feb 18 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
php实现的发送带附件邮件类实例
2014/09/22 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
Python表示矩阵的方法分析
2017/05/26 Python
python将unicode转为str的方法
2017/06/21 Python
获取Django项目的全部url方法详解
2017/10/26 Python
详解python播放音频的三种方法
2019/09/23 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
军训自我鉴定
2014/01/22 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
垂直极限观后感
2015/06/08 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL