compte à rebours de script java se réinitialiser à la page d'actualisation

Question

J'essayais d'implémenter un compte à rebours pour mon site, mais il se réinitialiser à chaque rafraîchissement de la page, je ne sais pas comment résoudre ce problème, vous pouvez m'aider avec ça? (i used this). ..

var timer; 
 
var compareDate = new Date(); 
 
compareDate.setDate(compareDate.getDate() + 16); //incresed by to date + (16 days) 
 

 
timer = setInterval(function() { 
 
    timeBetweenDates(compareDate); 
 
}, 1000); 
 

 
function timeBetweenDates(toDate) { 
 
    var dateEntered = toDate; 
 
    var now = new Date(); 
 
    var difference = dateEntered.getTime() - now.getTime(); 
 

 
    if (difference <= 0) { 
 

 
    // Timer done 
 
    clearInterval(timer); 
 

 
    } else { 
 

 
    var seconds = Math.floor(difference/1000); 
 
    var minutes = Math.floor(seconds/60); 
 
    var hours = Math.floor(minutes/60); 
 
    var days = Math.floor(hours/24); 
 

 
    hours %= 24; 
 
    minutes %= 60; 
 
    seconds %= 60; 
 

 
    $("#days").text(days); 
 
    $("#hours").text(hours); 
 
    $("#minutes").text(minutes); 
 
    $("#seconds").text(seconds); 
 
    } 
 
}

body { 
 
    background: #f5f5f5; 
 
} 
 
#timer { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 20px; 
 
    color: #999; 
 
    letter-spacing: -1px; 
 
} 
 
#timer span { 
 
    font-size: 60px; 
 
    color: #333; 
 
    margin: 0 3px 0 15px; 
 
} 
 
#timer span:first-child { 
 
    margin-left: 0; 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="timer"> 
 
    <span id="days"></span>days 
 
    <span id="hours"></span>hours 
 
    <span id="minutes"></span>minutes 
 
    <span id="seconds"></span>seconds 
 
</div>

Answer 1

Si vous souhaitez utiliser localStorage, procédez comme suit. Il stockera fondamentalement le compareDate lors de la première exécution.

ps. En raison des attributs de sécurité dans Snippet, cela ne fonctionnera pas ici, mais devrait fonctionner sur votre site.

var timer; 

var savedDate = localStorage.getItem('savedDate'); 
var compareDate = new Date(); 
if (savedDate) { 
    compareDate = new Date(savedDate); 
} else { 
    compareDate.setDate(compareDate.getDate() + 16); //incresed by to date + (16 days) 
    localStorage.setItem('savedDate', compareDate); 
} 

//...rest of code 

Answer 2

Depuis votre compte à rebours calcule l'heure de fin lorsque votre page commence, il est normal/attendu que le compte à rebours redémarre chaque fois que vous actualisez la page. Dans votre cas, ce que vous faites est d'ajouter 16 jours à la date actuelle.

Si vous voulez que le Coutdown ne pas changer, vous devez ajouter une date fixe, comme suit:

var compareDate = new Date(yyyy,MM,dd,hh,mm,ss); 

Modifier le yyyy, MM, etc. avec des valeurs années, mois, jours, heures, minutes et secondes comme dans l'exemple suivant:

var compareDate = new Date(2017,09,10,12,00,00); 

NB: cette solution ne dépend pas du client. Il affichera exactement le même compte à rebours pour chaque utilisateur connecté à la page.