创建倒数计时器js

Question

我正在尝试根据 MM:SS 格式的用户输入创建倒数计时器。所以当用户输入 10 时，它会显示为 10:00。但是，我正在努力解决如何以时间格式减少数字的逻辑。即：10:00、9:59、9:58 等等

我感到困惑的领域正在构建和配置我的代码，以便当 "minutes" 减 1（因此从 10:00 到 9:59）时，它只会减到 8 , 60 秒都过去了。

不幸的是，到目前为止，我只能以常规数字格式打印出用户输入，例如（即 10、9、8、7、6 ..）

HTML

<div class="form-group">
  <label for="exampleFormControlInput1">Count down Timer</label>
  <input type="number" class="form-control" id="timeInputForm" placeholder="Enter time in minutes">
</div>
<!-- submit button -->
<div class="text-center">
  <button type="submit" class="btn  btn-lg btn-success">Start</button>
</div>

JQUERY/JS

$('form').on('submit', function(e){
  e.preventDefault();
  userBreakMin = parseInt($('input#timeInputForm').val()); // retrieving user input and converting from string to int  
  let userBreakType = $('#formSelectOptions option:selected').text(); // grabbing the select option text 
  countDownTimer(userBreakMin);
});


const countDownTimer = (timeInMins) => {

  let convertToMins = userBreakMin * 60;
  let minutesInputed = convertToMins/60;
  let seconds = 60;            //parseInt(convertToMins%60);
  setInterval(()=>{
    minutesInputed -=1;
    if(seconds >0){
      --seconds;
    };

    //    if(minutesInputed > 0 ){
    //      console.log(minutesInputed -=1);
    //    }
    //    if(seconds > 0 ){
    //      console.log(seconds -=1);
    //    }
  },1000);
};

Answer 1

您必须检查每次间隔迭代中的秒数是否为零...
此外，您还必须查看它是否低于 10，以便添加前导零。

最后，您必须检查分钟和秒是否都为零 clearInterval()。

这是一个例子...
查找代码中的注释。 ;)

$('form').on('submit', function(e) {
  e.preventDefault();
  
  // Retrieve user input and convert to integer 
  userBreakMin = parseInt($('input#timeInputForm').val());

  // Set the start time
  $("#min").text(userBreakMin-1);
  $("#sec").text("59");
  
  // Call the function to start the interval.
  countDownTimer(userBreakMin);
});

const countDownTimer = (timeInMins) => {

  let convertToMins = userBreakMin * 60;
  
  var myCountdown = setInterval(() => {
    
    // Getting the displayed values
    var minutes = parseInt($("#min").text());
    var seconds = parseInt($("#sec").text());
    
    // The end?
    if(minutes == 0 && seconds == 0){
      clearInterval(myCountdown);
    }
    else{
      // If seconds are at 00, decrement the minutes
      if (seconds == 0) {
        seconds = 60;
        $("#min").text(minutes-1);
      }
      
      // Decrement seconds
      seconds--;

      // Leading zero for seconds below 10
      var leadingZero = "";
      if(seconds<10){
        leadingZero = "0";
      }

      $("#sec").text(leadingZero+seconds);
    }
    
  }, 1000);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Count down Timer</label>
    <input type="number" class="form-control" id="timeInputForm" placeholder="Enter time in minutes">
  </div>
  <!-- submit button -->
  <div class="text-center">
    <button type="submit" class="btn  btn-lg btn-success">Start</button>
  </div>
</form>
<br>

<span id="min">0</span>:<span id="sec">00</span>

创建倒数计时器js

Creating countdown timer js

countdown