dimanche 3 mai 2020

Countdown Timer that disappear after 10 minutes and not reset the counter

Hello I am working on a countdown timer of 10 minutes. I was wondering on how could I make the counter to stop showing up when the time is up or keep counting from the number time that there is left even after you refresh the page. Hopefully you can give me a hint or help me. Here I leave the code.

Thank you!

<div id="clockdiv"></div>
    <style>
      #clockdiv {background:#bfbfbf ;color:white; padding:6px; border-radius:4px; font-size: 16px; margin-bottom: 16px;}
    </style>
    <script>
      // 10 minutes from now
var time_in_minutes = 10;
var current_time = Date.parse(new Date());
var deadline = new Date(current_time + time_in_minutes*60*1000);


function time_remaining(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 );
    var days = Math.floor( t/(1000*60*60*24) );
    return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
}
function run_clock(id,endtime){
    var clock = document.getElementById(id);
    function update_clock(){
        var t = time_remaining(endtime);
      clock.innerHTML = "<span style='color: #E89E88; font-weight: bold;'>DÉSE PRISA! </span>"+ 'Use el código de descuento' + "<span style='font-weight: bold; color:white;'>'DESCUENTO5'</span>" + ' en los próximos '+t.minutes+ ' m ' +t.seconds + ' s ' + ', y ahorre un extra 5% en su pedido!';
        if(t.total==0){ clearInterval(timeinterval); }
    }

    update_clock(); // run function once at first to avoid delay
    var timeinterval = setInterval(update_clock,1000);
}
run_clock('clockdiv',deadline);
    </script> 



Aucun commentaire:

Enregistrer un commentaire