OTP 验证 2 分钟倒计时计时器答案

【问题标题】：OTP verification 2 minutes count down timerOTP 验证 2 分钟倒计时计时器
【发布时间】：2018-11-09 14:30:37
【问题描述】：

我需要在 02.00 到 0.00 之前停止时间。但它在 -1.59 停止或开始递减。在角度打字稿中，我写了上面的代码。我做错了什么：

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

IN Angular 打字稿：

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;
  }
}

【问题讨论】：

为什么写代码不缩进？
您只需要 Angular Typescript 中的代码吗？纯JS有用吗？
@praveenKumar 我听不懂你在说什么
js 和 ts 只是相似而已。无论如何我需要一个解决方案来停止递减
试图复制它。

标签： javascript jquery angular html

【解决方案1】：

您可以使用内部 setTimeout 执行递归调用并仅计算秒数，从而实现更简单的操作：

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>

timerOn 变量仅用于以编程方式停止倒计时。加载其他页面时无用。

【讨论】：

@Bertrand 我刚刚添加了一些语法糖，希望没问题。