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格式化时间和js格式化时间戳示例
Feb 10 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 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中判断变量为空的几种方法分享
2013/08/26 PHP
php读取本地json文件的实例
2018/03/07 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JavaScript 学习笔记(十一)
2010/01/19 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Python中的TCP socket写法示例
2018/05/11 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
学python安装的软件总结
2019/10/12 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
得到Class的三个过程是什么
2012/08/10 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
质量工程师岗位职责
2013/11/16 职场文书
社区学习十八大感想
2014/01/22 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
单位介绍信格式
2015/01/31 职场文书
庆祝教师节主持词
2015/07/06 职场文书
清洁工工作总结
2015/08/11 职场文书
《检阅》教学反思
2016/02/22 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
zabbix监控mysql的实例方法
2021/06/02 MySQL
Java实现多线程聊天室
2021/06/26 Java/Android
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript