2017-11-10 2 views
0

Ich habe das Tutorial gefolgt: http://www.javascriptkit.com/dhtmltutors/live-local-time-google-time-zone-api.shtmlUngültiges Datum Ausgabe für mein Date Zeichenfolge

Und nun möchte ich es in zwei Funktionen brechen:
Funktion # 1. Gibt die aktuelle Zeit einer eingestellten Zeitzone in Millisekunden zurück
Funktion # 2. das LOCALDATE Objekt erhöhen in Funktion # 1 von 1 Sekunde pro Sekunde und legen Sie sie in der

Aber ich den Ausgang "Invalid Date" erhalten Hier ist mein Code:

var loc = '37.7749295, -122.4194155'; // San Francisco expressed as lat, lng tuple 
 
\t var targetDate = new Date(); // Current date/time of user computer 
 
\t var timestamp = targetDate.getTime() /1000 + targetDate.getTimezoneOffset() * 60; // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC 
 
\t var apikey = 'Google_Time_Zone_key'; // timezone API key 
 
\t var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc +'&timestamp=' + timestamp + '&key=' + apikey; 
 

 
function current_time_load1() { 
 
\t var xhr = new XMLHttpRequest(); // create new XMLHttpRequest2 object 
 
\t xhr.open ('GET', apicall); // open GET request 
 
\t xhr.onload = function() { 
 
     \t if (xhr.status === 200) { // if Ajax request successful 
 
    \t \t var output = JSON.parse(xhr.responseText); // convert returned JSON string to JSON object 
 
      \t \t // console.log(output.status); // log API return status for debugging purpose 
 
     \t if (output.status =='OK') { // if API reports everthing was returned sucessfully 
 
    \t \t \t var offsets = output.dstOffset * 1000 + output.rawOffset * 1000; // get DST and time zone offsets in milliseconds 
 
    \t \t \t var localdate = new Date (timestamp * 1000 + offsets); // Date object containing current time of destination (timestamp + dstOffset + rawOffset) 
 
      \t \t \t // localdate.toLocaleString(); // Display current destination date and time 
 
      \t \t var refreshDate = new Date(); // get current date again to calculate time elapsed between targetDate and now 
 
       var millisecondselapsed = refreshDate - targetDate; // get amount of time elapsed between targetDate and now 
 
       localdate.setMilliseconds(localdate.getMilliseconds()+ millisecondselapsed); // update localdate to account for any time elapsed 
 
      \t \t } 
 
      } 
 
\t \t \t else { 
 
     \t console.log ('Request failed. Returned status of ' + xhr.status); 
 
\t \t \t } //end of xhr.onload 
 
\t \t } 
 
\t xhr.send(); // send request 
 
\t } 
 

 
function current_time_load(divid){ 
 
    var container = document.getElementById(divid); 
 
    var localdate = new Date (current_time_load1()); 
 
    setInterval(function(){ 
 
        localdate.setSeconds(localdate.getSeconds()+1); 
 
        container.innerHTML = localdate.toLocaleTimeString('zh', {year : 'numeric', month: 'short', day: 'numeric'}); 
 
       }, 1000); 
 
} 
 
    
 
    current_time_load('time');
<div> 
 
test current time: <span id="time"></span> 
 
</div>

Ich habe den Wert von current_time_load1() in console.log zeigt undefined, aber die console.log (localdate.setMilliseconds (localdate.getMilliseconds() + millisecondselapsed;)) gibt die Millisekunden

zurück 210

Können Sie mir helfen, auf das Problem hinzuweisen?

Antwort

0

Paar Stunden der Suche, erkannte ich schließlich, dass es einen Rückruf benötigt, um das Ergebnis der XmlHttpRequest abrufen. Hier ist, was für mich funktioniert:

function current_time_load1 (callback) { 
 
\t var xhr = new XMLHttpRequest(); // create new XMLHttpRequest2 object 
 
\t xhr.open ('GET', apicall); // open GET request 
 
\t xhr.onload = function() { 
 
     \t if (xhr.status === 200) { // if Ajax request successful 
 
    \t \t var output = JSON.parse(xhr.responseText); // convert returned JSON string to JSON object 
 
      \t \t // console.log(output.status); // log API return status for debugging purpose 
 
     \t if (output.status =='OK') { // if API reports everthing was returned sucessfully 
 
    \t \t \t var offsets = output.dstOffset * 1000 + output.rawOffset * 1000; // get DST and time zone offsets in milliseconds 
 
    \t \t \t var localdate = new Date (timestamp * 1000 + offsets); // Date object containing current time of destination (timestamp + dstOffset + rawOffset) 
 
      \t \t \t // localdate.toLocaleString(); // Display current destination date and time 
 
      \t \t var refreshDate = new Date(); // get current date again to calculate time elapsed between targetDate and now 
 
       var millisecondselapsed = refreshDate - targetDate; // get amount of time elapsed between targetDate and now 
 
       if(callback) { 
 
        callback(localdate.setMilliseconds(localdate.getMilliseconds()+ millisecondselapsed)); 
 
       } // update localdate to account for any time elapsed 
 
      \t  //console.log(localdate.setMilliseconds(localdate.getMilliseconds()+ millisecondselapsed)); 
 
      } 
 
      } 
 
\t \t \t else { 
 
     \t console.log ('Request failed. Returned status of ' + xhr.status); 
 
\t \t \t } //end of xhr.onload 
 
\t \t } 
 
\t xhr.send(); // send request 
 
\t } 
 

 
    current_time_load1(function (result){ 
 
    console.log('okay'); 
 
    var container = document.getElementById('test'); 
 
    var localdate = new Date(result); 
 
    setInterval(function(){ 
 
        localdate.setSeconds(localdate.getSeconds()+1); 
 
        container.innerHTML = localdate.toLocaleTimeString('zh', {year : 'numeric', month: 'short', day: 'numeric'}); 
 
       }, 1000); 
 
}, function(){ 
 
    console.log('fail'); 
 
    });

Also, habe ich im Grunde if(callback){callback();} auf die current_time_load1 Funktion. Führen Sie diese Funktion dann mit einer neuen Funktion aus, die den Parameter "result" enthält. Eine gute Lektion zu lernen :)

Verwandte Themen