CODEWITHSUNDEEP
javascripthtmlcountdowntimer
Nick Gregory
Nick Gregory

Reputation: 33

Add EXPIRATION message to JS countdown timer

I have following script:

document.getElementById("timer").innerHTML = 0 + ":" + 10;

function startTimer() {
  var presentTime = document.getElementById("timer").innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond(timeArray[1] - 1);
  if (s == 59) {
    m = m - 1;
  }
  if (m < 0) {
    return;
  }

  document.getElementById("timer").innerHTML = m + ":" + s;
  console.log(m);
  setTimeout(startTimer, 1000);
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {
    sec = "0" + sec;
  } // add zero in front of numbers < 10
  if (sec < 0) {
    sec = "59";
  }
  return sec;
}
<div class="sale_content">
  СКИДКА АКТИВНА ЕЩЁ: <span id="timer"></span>
</div>

All works great, but when timer expires it just shows "0:00"

How can I add expiration message inside ?

Thank you!

Upvotes: 0

Views: 387

Answers (3)

Yogeshwaran
Yogeshwaran

Reputation: 70

You can add your message expiry message, inside the minute expiry if block if (m<0){} before the return statement. I added the solution to your code below for reference

<div class="sale_content">
    СКИДКА АКТИВНА ЕЩЁ: <span id="timer"></span>
</div>

<script>
document.getElementById('timer').innerHTML =
  0 + ":" + 3;



function startTimer() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  
  
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  if(m<0){
  document.getElementById('timer').innerHTML = "Timer expired."
    return
  }
  
  document.getElementById('timer').innerHTML =
    m + ":" + s;
  console.log(m)
  setTimeout(startTimer, 1000);
  
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  if (sec < 0) {sec = "59"};
  return sec;
}

startTimer();
</script>
</body>
</html>

Upvotes: 1

Sumit Sharma
Sumit Sharma

Reputation: 1235

var timeleft = 11;
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
  clearInterval(downloadTimer);
    alert("Timer Expired!")
        return;
  }
  document.getElementById("progressBar").value = timeleft - 1;
  document.getElementById("timer").innerHTML = "0:"+(timeleft - 1);
  timeleft -= 1;
}, 1000);
<div class="sale_content">
    СКИДКА АКТИВНА ЕЩЁ: <span id="timer"></span>
</div>
<progress value="0" max="10" id="progressBar"></progress>

Upvotes: 0

lordsanken
lordsanken

Reputation: 58

the problem is that you want to console.log(m) which is just 0:00. I've changed a bit of your code so instead of m it logs n which is: n = m + ":" + s;


<div class="sale_content">
    СКИДКА АКТИВНА ЕЩЁ: <span id="timer"></span>
</div>

<script>
document.getElementById('timer').innerHTML =
  0 + ":" + 10;



function startTimer() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  if(m<0){
    return
  }
  
  document.getElementById('timer').innerHTML =
    n = m + ":" + s;
  console.log(n)
  setTimeout(startTimer, 1000);
  
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  if (sec < 0) {sec = "59"};
  return sec;
}
</script>

try it like this

Upvotes: 0

Related Questions