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 相关文章推荐
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
小程序实现投票进度条
Nov 20 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
VUE实现吸底按钮
Mar 04 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
关于js与php互相传值的介绍
2013/06/25 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php 中的closure用法详解
2017/06/12 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
document.getElementById介绍
2011/09/13 Javascript
js三种排序算法分享
2012/08/16 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python3.5安装python3-tk详解
2019/04/26 Python
python学习开发mock接口
2019/04/28 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
如何提高JDBC的性能
2013/04/30 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
便利店的创业计划书
2014/01/15 职场文书
九年级体育教学反思
2014/01/23 职场文书
环保建议书作文
2014/03/12 职场文书
教学评估实施方案
2014/03/16 职场文书
摩登时代观后感
2015/06/03 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL