Heim  >  Artikel  >  Web-Frontend  >  Analyse der in der toLocaleTimeString()-Methode vorhandenen Probleme

Analyse der in der toLocaleTimeString()-Methode vorhandenen Probleme

零下一度
零下一度Original
2017-06-26 11:16:341980Durchsuche

In den letzten zwei Tagen habe ich einen Fehler behoben und ein Problem entdeckt: Es gibt einen Unterschied zwischen der toLocaleTimeString()-Methode im IE und Google Chrome bei der Konvertierung des Zeitteils des Date-Objekts (ohne Datum) in ein „ Zeitzeichenfolge“ entsprechend dem lokalen Zeitformat. . Es sollte ursprünglich keinen Unterschied in den Methoden geben, aber der Unterschied wird erst sichtbar, nachdem der Browser ihn verarbeitet hat!

Das Folgende ist der Testcode:

    /**   验证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);
    }

Der Screenshot sieht wie folgt aus:

Abbildung 1: Dieses Bild zeigt die Zwei Methoden bei Google Aus der laufenden Situation ist ersichtlich, dass der obere Teil von von toLocaleTimeString() verarbeitet wird und die Minuten und Sekunden jeweils durch 0 ergänzt werden Teil sind die Minuten und Sekunden, die durch erhalten werden, ohne Ergänzung 0.

Abbildung 2: Dieses Bild zeigt die Funktionsweise der beiden Methoden im IE11. Es liegt ein Problem vor. Der obige Teil wird von toLocaleTimeString() verarbeitet. Nach dem Hinzufügen von 0 zu Minuten und Sekunden wird am Anfang von und links und rechts von „:“ eingefügt. " , , wodurch die Länge der gesamten Zeichenfolge von ursprünglich 8 auf 13 verlängert wird, was zum Ergebnis des substr führt (index,length) Methode weicht von der erwarteten ab Inkonsistent; im unteren Teil, da die Stunden, Minuten und Sekunden separat erhalten werden, obwohl es keine 0-Auffüllung gibt, wird die -Zeichenfolge von uns selbst gespleißt , und es gibt kein Problem beim Hinzufügen von Leerzeichen, also substr(index, length) Die Ergebnisse der Methode stimmen mit den Erwartungen überein und wir können die gewünschte Zeichenfolge erhalten.

Abbildung 3: Dieses Bild zeigt die Funktionsweise der beiden Methoden bei Google. Wenn Stunden, Minuten und Sekunden alle mehr als 10 sind, besteht das angezeigte Ergebnis aus Zeichen Die Zeichenfolgen- und Datenlängen sind konsistent.

Abbildung 4: Dieses Bild zeigt die Funktionsweise der beiden Methoden im IE11. Wenn die Stunden, Minuten und Sekunden 10 überschreiten, sieht die angezeigte Ergebniszeichenfolge gleich aus. unterscheidet sich tatsächlich von . Der Längenunterschied zwischen den beiden ist auf das von toLocaleTimeString() hinzugefügte Leerzeichen zurückzuführen.

Abbildung 5: Dieses Bild zeigt die beiden Methoden, die substr(index, length) auf Google ausführen. Da die Länge der Daten die gleiche ist wie , gilt dies auch für erhalten Die Zeichenfolge ist dieselbe wie .

Abbildung 6: Dieses Bild zeigt die Operation von substr(index, length) auf IE11 durch die beiden Methoden. Da die Länge der Daten inkonsistent ist , also wird erhalten Strings sind auch unterschiedlich.

Schließlich für die Stunden, Minuten und Sekunden, die einzeln erhalten werden, d. h. für die Ergebnisse, die mit den drei Methoden getHours(), getMinutes() und getSeconds() erhalten werden, falls vorhanden ist kleiner als „zehn“. Es gibt Unterschiede zwischen den Formaten und anderen Formaten, sodass Sie nur

Urteile fällen und ergänzen müssen.

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);
    }

Das obige ist der detaillierte Inhalt vonAnalyse der in der toLocaleTimeString()-Methode vorhandenen Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn