CODEWITHSUNDEEP
javascript
Alexandru Constantin
Alexandru Constantin

Reputation: 23

Reset js countdown timer

I'm not a js developer, more of graphic designer wannabe developer, I'm creating a website for a friend and I need to make the countdown reset after it reaches the deadline.

I've got this code from Matt Smith on Codepen and it works really well (you can have a look https://m13m.webflow.io/), but unfortunately the timer goes negative and I want it to repeat itself.

How could I do that?

Thank you very much!

 <script>
// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Mar 19, 2022 22:28:00').getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

      document.getElementById('days').innerText = Math.floor(distance / (day)),
        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
      
      //do something later when date is reached
      //if (distance < 0) {
      //  clearInterval(x);
      //  'IT'S MY BIRTHDAY!;
      //}

    }, second)
  
</script>

Upvotes: 2

Views: 910

Answers (1)

Maik Lowrey
Maik Lowrey

Reputation: 17594

Your code look good. You have to check if distance lower as 0 then clear the timer and print you BDay text.

// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDown - now;
  if (distance < 0) {    
    document.getElementById('msg').innerHTML = "HAPPY BDAY"    
    clearInterval(x);
    return false;
  }
  document.getElementById('days').innerText = Math.floor(distance / (day));
  document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
  document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
  document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  
  

    }, second)
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="msg"></div>

Update (Timer will start again)

// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
let round = 1;
const diff = 1; // set timediff in minutes
//let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let countDown = new Date(new Date().getTime() + diff*60000);
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDown - now;
  if (distance < 0) {    
    countDown = new Date(new Date().getTime() + diff*60000);
    document.getElementById('msg').innerHTML = "HAPPY BDAY" + ' Round => ' + (round++)
  }
  document.getElementById('days').innerText = Math.floor(distance / (day));
  document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
  document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
  document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  
}, second)
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="msg"></div>

Upvotes: 2

Related Questions