Html Countdown-Timer funktioniert nicht auf Seite neu laden

Hallo ich Countdowns Problem in Neuladen der Seite bin vor, unten ist mein CodeHtml Countdown-Timer funktioniert nicht auf Seite neu laden

<html> 
    <head> 
     <script type="text/javascript"> 
     function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.now(); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
    return { 
    'total': t, 
    'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
    }; 
} 

function initializeClock(id, endtime) { 
    var clock = document.getElementById(id); 
    var daysSpan = clock.querySelector('.days'); 
    var hoursSpan = clock.querySelector('.hours'); 
    var minutesSpan = clock.querySelector('.minutes'); 
    var secondsSpan = clock.querySelector('.seconds'); 

    function updateClock() { 
    var t = getTimeRemaining(endtime); 

    if (t.total <= 0) { 
     document.getElementById("clockdiv").className = "hidden-div"; 
     document.getElementById("timeIsNow").className = "visible-div"; 
     clearInterval(timeinterval); 
     return true; 
    } 

    daysSpan.innerHTML = t.days; 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 

    } 

    updateClock(); 
    var timeinterval = setInterval(updateClock, 1000); 
} 


var deadline = '2015-12-14T20:14:00+02:00'; 

initializeClock('clockdiv', deadline); 
       </script> 
       <style> 
     body{ 
    text-align: center; 
    background: #00ECB9; 
    font-family: sans-serif; 
    font-weight: 100; 
} 

h1{ 
    color: #396; 
    font-weight: 100; 
    font-size: 40px; 
    margin: 40px 0px 20px; 
} 

#clockdiv{ 
    font-family: sans-serif; 
    color: #fff; 
    display: inline-block; 
    font-weight: 100; 
    text-align: center; 
    font-size: 30px; 
} 
.hidden-div { 
    visibility: hidden; 
} 
.visible-div { 
    visibility: visible; 
} 
#clockdiv > div{ 
    padding: 10px; 
    border-radius: 3px; 
    background: #00BF96; 
    display: inline-block; 
} 

#clockdiv div > span{ 
    padding: 15px; 
    border-radius: 3px; 
    background: #00816A; 
    display: inline-block; 
} 

.smalltext{ 
    padding-top: 5px; 
    font-size: 16px; 
} 
       </style> 
      </head> 
      <body> 
       <h1>Countdown Clock</h1> 

       <div id="clockdiv" class="visible-div"> 
        <span class="days"></span> Days 
        <span class="hours"></span> Hours 
        <span class="minutes"></span> Minutes 
        <span class="seconds"></span> Seconds 
       </div> 
      </body>  
     </html>

, wenn ich meine Seite neu laden der Timer ist es Standardzeit setzt, und es ist Anzeige von der Einstellungszeit, ich habe wenige Codes, die online kommen, aber ich bin nicht in der Lage, dies zu tun, so sehe ich einige Hilfe dabei. Danke.

Quelle

2016-04-12 Raja Shekar

Welches Verhalten haben * Sie *? Was erwarten Sie, wenn jemand die Seite neu lädt? Sie verwenden hier ** clientseitigen ** Code ohne jegliche Persistenz. –

@ André Dion Das war meine erste Reaktion, dann habe ich mir das Drehbuch genauer angeschaut. Er hat ein festes Zieldatum, Sie können die Differenz auf der Client-Seite berechnen (Zieldatum - jetzt auf dem Client). Da jetzt zur Laufzeit gerechnet wird, ist es dynamisch. – zozo

Ich nehme an, Sie möchten die Zeit berechnen, bis das Datum in der Zukunft gesetzt wird.

Sie haben 3 Probleme in Ihrem Code, der verhindert, dass:

1.Your html, dass durch Ihre js ist nach dem js geladen zugegriffen wird. Sie verweisen auf divs, die nicht geladen wurden (zB hier var clock = document.getElementById (id);). Dies bricht dein Skript.

2.Das hier referenzierte Element existiert nicht: document.getElementById ("timeIsNow"). ClassName = "visible-div" ;. Dies bricht dein Skript.

3.Das Zieldatum liegt in der Vergangenheit (var deadst = '2015-12-14T20: 14: 00 + 02: 00';). Dies unterbricht das Skript nicht, aber es löscht den Timer (so wird es offensichtlich nur zweimal ankreuzen).

4.In dem Code, den Sie gepostet haben, gibt es keine andere Sache, die Sie daran hindert, die Zeit zu berechnen, und es wird nach dem Neuladen funktionieren, da das Datum fest codiert ist. Alle anderen Probleme in Bezug auf Zeitzonen, Datumsauffrischung usw. stehen nicht im Zusammenhang mit dem geposteten Code.

Als eine Randnotiz (nehmen Sie das nicht falsch, ich versuche nur zu helfen und es ist eine persönliche Meinung) ... der Code ist tragisch (der Umfang der Funktionen, Computer auf der Client-Seite, Einzug usw.). Und die Berechnungsmethode ist bestenfalls fragwürdig; Ich empfehle ein Refactoring (aber diese sind nicht mit der Frage verbunden, nur ein paar Tipps).

Quelle

2016-04-12 12:42:53 zozo

-2

Dies wird hilfreich, wenn Sie an zweiter Stelle nennen wollen auf jeden

function worldClockZone() { 
      setTimeout("worldClockZone()", 1000) 
} 
window.onload = worldClockZone;

Quelle

2016-04-12 12:48:48

Das ist hilfreich, aber keine Antwort, ich schlage vor, als Kommentar zu posten. – zozo

Html Countdown-Timer funktioniert nicht auf Seite neu laden

Antwort

Verwandte Themen