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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
header()函数使用说明
2006/11/23 PHP
php 正则表达式小结
2009/08/31 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
什么情况下可以不写PHP的闭合标签“?>”
2014/08/28 PHP
php文件缓存类汇总
2014/11/21 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
员工保密协议书
2014/09/27 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
放弃继承权公证书
2015/01/23 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL