OTP verification 2 minutes count down timer

javascript jquery angular html

27,510

You can do much simpler with an inner setTimeout that performs a recursive call and counting only seconds:

let timerOn = true;

function timer(remaining) {
  var m = Math.floor(remaining / 60);
  var s = remaining % 60;
  
  m = m < 10 ? '0' + m : m;
  s = s < 10 ? '0' + s : s;
  document.getElementById('timer').innerHTML = m + ':' + s;
  remaining -= 1;
  
  if(remaining >= 0 && timerOn) {
    setTimeout(function() {
        timer(remaining);
    }, 1000);
    return;
  }

  if(!timerOn) {
    // Do validate stuff here
    return;
  }
  
  // Do timeout stuff here
  alert('Timeout for otp');
}

timer(120);

<input type="text" name="otp" placeholer="Enter your otp"/>
<div>Time left = <span id="timer"></span></div>

The timerOn var is only here to stop countdown programmatically. Useless if loading another page.

27,510

Nivetha Elangovan

Updated on May 31, 2020

Comments

Nivetha Elangovan about 4 years
I need to stop time by 02.00 to 0.00. But it stopped in -1.59 or started decrement onwards. In angular typescript i wrote above code. what i did wrong:
```
<html>
  <body>
    <input type="text" name="otp" placeholer="Enter your otp"/>
    <div>Time left = <span id="timer"></span></div>
  </body>
</html>
```
IN Angular typescript:
```
callMyCount(){    
  document.getElementById('timer').innerHTML ="02" + ":" + "00";
  var myTimer=setInterval(startTimer,1000);

  function startTimer() {
    var presentTime = document.getElementById('timer').innerHTML;
    var timeArray = presentTime.split(/[:]+/);
    var m = parseInt(timeArray[0]);
    var s = checkSecond((parseInt(timeArray[1]) - 1));
    if(s==59){m=m-1}
    if(m<0 && s==59){alert("Timeout for otp");
                     clearTimeout(myTimer);}
    document.('timer').innerHTML =  m + ":" + s;
  }

  function checkSecond(sec) {
    if (sec < 10 && sec >= 0) {sec = "0" + sec}; 
    if (sec < 0) {sec = "59"};
    return sec;
  }
}
```
- Praveen Kumar Purushothaman about 6 years
  
  Why do you write code without indentation?
- Praveen Kumar Purushothaman about 6 years
  
  Do you need code only in Angular Typescript? Does pure JS work?
- Nivetha Elangovan about 6 years
  
  @praveenKumar i cannt understand what you are saying
- Nivetha Elangovan about 6 years
  
  js and ts are similar only. Any way i need a solution to stop decrement
- Praveen Kumar Purushothaman about 6 years
  
  Trying to replicate it.
- Praveen Kumar Purushothaman about 6 years
  
  document.('timer').innerHTML = m + ":" + s; Is this line right?
- Praveen Kumar Purushothaman about 6 years
  
  I couldn't replicate it: jsbin.com/bogasecaga/edit?html,js,console,output
- Nivetha Elangovan about 6 years
  
  thats for display count each time its working
- Praveen Kumar Purushothaman about 6 years
  
  But it stopped in -1.59 or started decrement onwards. - I am unable to replicate this part... :(
- Nivetha Elangovan about 6 years
  
  if im checking my condition by if(m<0) it brings dif answer in angular while running
Praveen Kumar Purushothaman about 6 years

@Bertrand I just added some syntactic sugar, hope it's fine.