toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式,把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别
这两天修改一个bug,发现一个问题: toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式,把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别。方法原本应该是没有区别的,经过浏览器处理以后才出现的区别!
下面是测试代码:
/*
* 验证Date 对象(时间模块) toLocaleTimeString()方法分别在IE和谷歌浏览器上 根据本地时间格式,把 Date 对象的时间部分转换为“时间字符串”存在区别
* 从而区别substr(index,length)方法为什么在处理同一个时间字符串,在两个浏览器上的到的结果不一样!
* */
function localeTime(){ //toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分(不含日期)转换为字符串。
var date = new Date(); //toLocaleTimeString()转换的时间,会在时、分、秒不足十的情况下在前面自行加"0",如"01:02:03" 两个浏览器都会
var localeTime = date.toLocaleTimeString();
console.log(localeTime,localeTime.length);
for(var i= 0; i<localeTime.length; i++){
console.log(localeTime[i]);
}
var substr = localeTime.substr(0,6);
console.log(substr);
}
function hou_min_sec(){ //getHours(),getMinutes(),getSeconds() 单独获取Date 对象时分秒,然后通过拼接整合成一个时间字符串。
var date = new Date(); //getHours(),getMinutes(),getSeconds() 获取的时间,"不会"在时、分、秒不足十的情况下自行加"0",如"1:2:3",若要格式一样,则需要另行处理 两个浏览器都不会
var hou = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var hou_min_sec = hou +":"+ min +":"+ sec;
console.log(hou_min_sec,hou_min_sec.length);
for(var i= 0; i<hou_min_sec.length; i++){
console.log(hou_min_sec[i]);
}
var substr = hou_min_sec.substr(0,6);
console.log(substr);
}
截图如下:
图1:此图为两方法在谷歌上的运行情况,可以看出上部分 toLocaleTimeString()处理的,为分、秒分别补0了;下部分是分别获取的分、秒,没有补0。
图2:此图为两方法在IE11上的运行情况。出问题了,上部分 toLocaleTimeString()处理的,在为分、秒分别补0的操作下,还为开头和":"的左右各加了一个空格,从而导致整个字符串的长度由原来的8加长到13,从而导致了 substr(index,length) 方法的运行结果与预想的不一致;而下部分由于是分别获取的时,分、秒,虽然没有补0,但是字符串是我们自己拼接的,不存在添加空格这个问题,所以 substr(index,length) 方法的运行结果与预想的一致,能得到我们想要的字符串。
图3:此图为两方法在谷歌上的运行情况,在时、分、秒都超过10的情况下,显示的结果字符串和数据长度是一致的。
图4:此图为两方法在IE11上的运行情况,在时、分、秒都超过10的情况下,显示的结果字符串看似一样。其实不一样,两者长度区别,由于toLocaleTimeString() 添加空格的缘故。
图5:此图为两方法在谷歌上的运行 substr(index,length)的 情况,由于数据长度是一致的,所以所得到的字符串是一样的。
图6:此图为两方法在IE11上的运行 substr(index,length)的 情况,由于数据长度不一致的,所以所得到的字符串也不一样。
最后,对于单独获取的时、分、秒,即getHours(),getMinutes(),getSeconds()三个方法获得的结果,如果不足"十",在格式上其他格式存在差异,只需要判定补足就行。
function hou_min_sec(){
var date = new Date();
var hou = date.getHours().toString();
var min = date.getMinutes().toString();
var sec = date.getSeconds().toString();
if(hou.length == 1){ //通过判定各个变量的长度(先将它们的值转化为字符串格式),来确定它们是否不足十
hou = "0" + hou; //反正它们最后都是以字符串形式拼接,所以我认为这样补"0"最简单
}else if(min.length == 1){
min = "0" + min;
}else if(sec.length == 1){
sec = "0" + sec;
}
var hou_min_sec = hou +":"+ min +":"+ sec;
console.log(hou_min_sec,hou_min_sec.length);
for(var i= 0; i<hou_min_sec.length; i++){
console.log(hou_min_sec[i]);
}
var substr = hou_min_sec.substr(0,6);
console.log(substr);
}
toLocaleTimeString()方法在IE和谷歌浏览器上 根据本地时间格式,把 Date 对象的时间部分(不含日期)转换为“时间字符串”存在区别的更多相关文章
- JavaScript -- 时光流逝(五):js中的 Date 对象的方法
JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...
- new Date() 对象及方法:
在别人的代码中见了两回 new Date().toLocaleString(),查了才知道,toLocaleString()是 根据本地时间格式,把 Date 对象转换为字符串.于是好奇new Dat ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- 如何在windows上调试安卓机谷歌浏览器上的页面
- 下面的方法仅在windows和安卓机上测试过,,,, - 手机(安卓机)需要安装chrome与电脑(Windows)上的chrome配合,也就是只能调试谷歌浏览器上的页面 1.手机的准备工作 打开 ...
- scala 学习笔记(04) OOP(上)主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类
一.主从构造器 java中构造函数没有主.从之分,只有构造器重载,但在scala中,每个类都有一个主构造器,在定义class时,如果啥也没写,默认有一个xxx()的主构造器 class Person ...
- 两种方法上传本地文件到github
https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...
- HTML5 FormData 方法介绍以及实现文件上传
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信.XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式. ...
- Py之Crawler:爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹——Jason niu
#Py之Crawler:爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹 import urllib.request import os import random def ...
- 两种方法上传本地文件到github(转)
自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...
随机推荐
- 关于如何用js完成全选反选框等内容
在学习js过程中按照视频写了这个页面 可以在点上面全选/全不选时全部选中或者取消 在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整 功能比较完善 以下是代码 <!DOCTYPE h ...
- redis 数据类型 Hash
Redis 数据类型Hash:hash数据类型存储的数据和mysql数据库中存储的一条记录很类似. hash的一些操作: 比如数据库是user表,有id,name,age ,sex,可以建立与之对应的 ...
- php-redis 模块 文档
直接从这位朋友转载过来. 地址 Redis::__construct构造函数$redis = new Redis(); connect, open 链接redis服务参数host: string,服务 ...
- 大数据搭建各个子项目时配置文件技巧(适合CentOS和Ubuntu系统)(博主推荐)
不多说,直接上干货! 很多同行,也许都知道,对于我们大数据搭建而言,目前主流,分为Apache 和 Cloudera 和 Ambari. 后两者我不多说,是公司必备和大多数高校科研环境所必须的! 分别 ...
- interface类型
接口可使用的修饰符如下: InterfaceModifier: one of Annotation public protected private abstract static strictfp ...
- 对Table_locks_immediate值的理解
Table_locks_immediate表示立即释放表锁数,Table_locks_waited表示需要等待的表锁数,如果Table_locks_immediate / Table_locks_wa ...
- CentOS6.4将MySQL5.1升级至5.5.36
1.为了安全期间,首先需要备份原有数据 2.卸载原有MySQL,先停止原有的MySQL服务,再查找 find / -name mysql [root@qxyw /]# find / -name mys ...
- 深度学习(一) BP神经网络
怎样理解非线性变换和多层网络后的线性可分,神经网络的学习就是学习如何利用矩阵的线性变换加激活函数的非线性变换 线性可分: 一维情景:以分类为例,当要分类正数.负数.零,三类的时候,一维空间的直线可以找 ...
- Kibana插件sentinl实现邮件报警
为什么会突然想用到对日志的异常内容进行邮件报警,是因为在上周公司的线上业务多次出现锁表,开发在优化sql的同时,我也在想是不是可以对日志的异常内容进行检测并实现邮件预警. 在网上查询了一些资料后,决定 ...
- java的文件操作类File
java.io.File类,是java获取文件/文件夹的所有属性,和完成所有相关操作的类 例子: package test.file.IO; import java.io.*; public clas ...