JavaScript - Speicher Countdown für wenn Seite neu geladen usw.

Also hier habe ich einen Countdown-Timer von 10 Minuten erstellt, um beim Drücken der START-Taste zu initiieren. Ich möchte diesen Countdown speichern, damit der Countdown läuft, wenn der Benutzer die Seite verlässt und zu ihm zurückkehrt. Beachten Sie, dass ich nicht möchte, dass der Countdown stoppt und dann weitergeht, wo er beim erneuten Laden der Seite aufgehört hat. Ich möchte, dass er bis zum angegebenen Stichtag weiterläuft. Irgendwelche Vorschläge?JavaScript - Speicher Countdown für wenn Seite neu geladen usw.

<html> 
<head> 

</head> 
<body> 



    <a id="sendButton" class="button" onclick=" startClock();">START</a> 

     <div id="sectionClock"> 

     <div id="clockdiv"> 
      <div> 
       <span class="hours"></span> 
       <div class="smalltext">Hours</div> 
      </div> 
      <div> 
       <span class="minutes"></span> 
       <div class="smalltext">Minutes</div> 
      </div> 
      <div> 
       <span class="seconds"></span> 
       <div class="smalltext">Seconds</div> 
      </div> 
     </div> 
    </div> 

    <script> 
function getTimeRemaining(endtime) { 
    var t = Date.parse(endtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    return { 
     'total': t, 
     'hours': hours, 
     'minutes': minutes, 
     'seconds': seconds 
    }; 
} 
var flag = 0; 

function startClock() { 


    /************ INITIALIZE CLOCK ************/ 
    function initializeClock(id, endtime) { 

     // If countdown time is 0 then operate 
     if(flag==0) 
     { 
      var clock = document.getElementById(id); 
      var hoursSpan = clock.querySelector('.hours'); 
      var minutesSpan = clock.querySelector('.minutes'); 
      var secondsSpan = clock.querySelector('.seconds'); 

     flag=1; 
     } 


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


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

      if (t.total <= 0) { 
       clearInterval(timeinterval); 
       flag=0; 
      } 
     } 

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

    var timeInMinutes = 10; 
    var currentTime = Date.parse(new Date()); 
    var deadline = new Date(currentTime + timeInMinutes*60*1000); 
    initializeClock('clockdiv', deadline); 

    document.cookie = deadline 

    var cookie = document.cookie; 

    console.log(cookie); 

} 

function sendTrack(){ 
    (function() { 

     var trackUrl = document.getElementById("url");  

    }()); 
} 

    </script> 

</body> 
</html>

Quelle

2016-05-05 mellows

Sie haben die richtige Idee, ein Cookie zu verwenden, aber you need to make sure you're reading/writing it correctly. ich eigentlich lokalen Speicher statt mit vermuten wäre.

var deadline = localStorage.deadline; 
if (deadline) { // Make sure we've saved one before 
    deadline = new Date(deadline); 
} else { // Create a new one and save it 
    deadline = new Date(Date.now() + timeInMinutes*60*1000); 
    localStorage.deadline = deadline; 
}

Quelle

2016-05-05 19:49:30

funktioniert das, obwohl die Uhr auf eine Klick-Funktion initialisiert wird? – mellows

@mellows Sicher. Wenn Sie möchten, dass es geladen wird, sobald die Seite geladen wird, tun Sie einfach den ersten Teil während Ihres Hauptcodes. Überprüfen Sie, ob die Frist im lokalen Speicher liegt. Wenn dies der Fall ist, starten Sie den Countdown. Ansonsten warte einfach auf den Klick. –

Ich bin ziemlich neu in der Codierung, nicht angenommen, Sie haben ein funktionierendes Beispiel? Ich kann nicht herausfinden, wo ich den Code ablegen soll. Schätze die Hilfe! – mellows

JavaScript - Speicher Countdown für wenn Seite neu geladen usw.

Antwort

Verwandte Themen