这两天修改一个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 对象的时间部分(不含日期)转换为“时间字符串”存在区别的更多相关文章

  1. JavaScript -- 时光流逝(五):js中的 Date 对象的方法

    JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...

  2. new Date() 对象及方法:

    在别人的代码中见了两回 new Date().toLocaleString(),查了才知道,toLocaleString()是 根据本地时间格式,把 Date 对象转换为字符串.于是好奇new Dat ...

  3. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  4. 如何在windows上调试安卓机谷歌浏览器上的页面

    - 下面的方法仅在windows和安卓机上测试过,,,, - 手机(安卓机)需要安装chrome与电脑(Windows)上的chrome配合,也就是只能调试谷歌浏览器上的页面 1.手机的准备工作 打开 ...

  5. scala 学习笔记(04) OOP(上)主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类

    一.主从构造器 java中构造函数没有主.从之分,只有构造器重载,但在scala中,每个类都有一个主构造器,在定义class时,如果啥也没写,默认有一个xxx()的主构造器 class Person ...

  6. 两种方法上传本地文件到github

    https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...

  7. HTML5 FormData 方法介绍以及实现文件上传

    XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信.XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式. ...

  8. Py之Crawler:爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹——Jason niu

    #Py之Crawler:爬虫利用随机选取代理访问服务器的方法实现下载某网址上所有的图片到指定文件夹 import urllib.request import os import random def ...

  9. 两种方法上传本地文件到github(转)

    自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...

随机推荐

  1. Matplotlib的初次使用

    # -*- coding: utf-8 -*-#先画一个线性图 import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] p ...

  2. Java Service Wrapper简介与使用(转)

    本文转自https://www.cnblogs.com/zcy_soft/p/3738947.html,写的非常好,珍藏一下 1. wrapper的意思? wrapper在此处理解为“包装”. 2. ...

  3. Normalize.css – HTML5-ready 的css重置样式集

    Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样 ...

  4. 11.Set 和 Map数据结构

    1.set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new S ...

  5. git 学习之基本概念

    在学习 Git 的时候我们经常会听到工作区,版本库,暂存区.那么这些东西指的是什么呢?本次我们就一起学习一下. 工作区 顾名思义:工作的区域,那么你一般在哪工作呢?当然是你本地可以看到的目录啦! 版本 ...

  6. 深入理解java集合框架之---------LinkedList

    日常开发中,保存一组数据使用的最多的就是 ArrayList, 其次就是 LinkedList 了. 我们知道 ArrayList 是以数组实现的,遍历时很快,但是插入.删除时都需要移动后面的元素,效 ...

  7. linux 升级-杂

    apt-cache search linux apt-cache search linux | grep generic apt-cache search linux | grep 4.10. apt ...

  8. log4php0.9的详细配备实例说明

    一.什么是log4php: log4j在JAVA中可算是大名鼎鼎的日志开发包了,它为apche组织维护项目,VxR兄使用php来实现了log4j的功能, 目前log4php已经作为log4j的一个子项 ...

  9. Flex Graphics

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  10. css的四种书写方式

    优先级: 外部样式 < 内部样式表 < 内联样式表: 优先级,即:同名的选择器右边的会覆盖左边 1.内部样式表 <head> <style> /*内部样式表,一般用 ...