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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 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
德生9700DX电路分析
2021/03/02 无线电
一个PHP分页类的代码
2011/05/18 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JavaScript多线程的实现方法
2007/05/08 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
js 省地市级联选择
2010/02/07 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
详解Python中的测试工具
2019/06/09 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python 转换文本编码实现解析
2019/08/27 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python 实现aes256加密
2020/11/27 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python