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 28 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
express express-session的使用小结
Dec 12 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 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打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
图片自动更新(说明)
2006/10/02 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
react路由配置方式详解
2017/08/07 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python decimal模块使用方法详解
2020/06/08 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
2014信息公开实施方案
2014/02/22 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书