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.看过了几个教程,总结出最 ...
随机推荐
- Java NIO学习与记录(二):FileChannel与Buffer用法与说明
FileChannel与Buffer用法与说明 上一篇简单介绍了NIO,这一篇将介绍FileChannel结合Buffer的用法,主要介绍Buffer FileChannel的简单使用&Buf ...
- EDEM 2018 + Fluent 19.0耦合
具体步骤参考流沙的文章即可,如果python版本较高,可能有个地方需要小小的改动一下: tools文件夹下的compile_lib_edem_coupling.py文件中,导入模块有个地方需要修改 其 ...
- Struts2方法调用的三种方式(有新的!调用方法的说明)
在Struts2中方法调用概括起来主要有三种形式 第一种方式:指定method属性 <action name="heroAction" class="com.ABC ...
- Comet:基于 HTTP 长连接的“服务器推”技术(转载)
“服务器推”技术的应用 传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.这种方式并不能满足很多现实应用的需求,譬如: 监控系统:后台硬件热插拔.LED.温度.电压发生变化: 即时通信 ...
- php中的namespace 命名空间
名字解释: namespace(命名空间),命名空间是从php5.3开始支持的功能.作用主要有两个:1.可以避免类名取得过长.2.当在多个框架配合使用时,同名的类之间不会冲突. 命名空间,看名字就知道 ...
- java线程总结2--wait/notify(all)/sleep以及中断概念
上一篇关于线程的博客简单梳理了一下多线程的一些基本概念,今天这篇博客再进行多线程编程中一些核心的方法进行简单的梳理和总结,主要是wait,sleep和notify方法以及中断的概念 一.中断概念. 在 ...
- php分页实例及其原理
Part1:实例 /** * 取得上次的过滤条件 * @param string $param_str 参数字符串,由list函数的参数组成 * @return 如果有,返回array('filter ...
- Shiro官方快速入门10min例子源码解析框架3-Authentication(身份认证)
在作完预备的初始化和session测试后,到了作为一个权鉴别框架的核心功能部分,确认你是谁--身份认证(Authentication). 通过提交给shiro身份信息来验证是否与储存的安全信息数据是否 ...
- HBase—列族数据库的术语
1. 列族数据库的基本组件 键空间,行键,列,列族 2. 什么是键空间 keyspace? 键空间 keyspace 是列族数据库的顶级数据结构,它在逻辑上能够容纳列族,行键以及与之相关的其他数据结构 ...
- megajson 高性能的json序列化、反序列化工具
go 自带的 encoding/json 支持json的序列化和反序列化, 然而它是基于反射的,有下面几个缺点: 反射是性能差的代名词, 并且无法在编译时进行优化. 只有 Public 字段才可以,反 ...