如何更改倒数显示？

问题描述

我已经用密码保护倒计时了。这是我的代码

var myTimer;
   function clock() {
     myTimer = setInterval(myClock,1000);
     var c = 180;
     var pass1 = 12;
     var input = document.getElementById("userInput").value;
     
     
     
     function myClock() {
       if (input==pass1){
       
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
       }
     }
   }

<p id="demo">180</p>


<form id="form" onsubmit="return false;">
  <input type="password" id="userInput" />
  <br/>
  <input type="submit" onclick="clock()" value="Start"/>
  <button onclick="clearInterval(myTimer)">Stop counter</button>
</form>

这就是结果。

但是我不喜欢那样。我想更改为分钟。所以180将是3分0秒。并且仍然倒计时直到0分0秒。如何更改？

解决方法

这可以通过对现有代码进行少量修改来实现。您需要根据mins计算remaining seconds和seconds。请参考以下代码示例。

const mins = Math.floor(c / 60);
const remainingSecs = c % 60;

集成所有内容：

var myTimer;

function clock() {
  myTimer = setInterval(myClock,1000);
  var c = 180;
  var pass1 = 12;
  var input = document.getElementById("userInput").value;

  function myClock() {
    if (input == pass1) {
      c = parseInt(c);
      if (!isNaN(c) || c > 0) {
        c--;
        const mins = String(Math.floor(c / 60)).padStart(2,'0');
        const remainingSecs = String(c % 60).padStart(2,'0');
        document.getElementById("demo").innerHTML = `${mins}:${remainingSecs}`;
        if (c === 0) {
          clearInterval(myTimer);
          alert("Reached zero");
        }
      }
    }
  }
}

<p id="demo">Timer will appear here</p>


<form id="form" onsubmit="return false;">
  <input type="password" id="userInput" />
  <br />
  <input type="submit" onclick="clock()" value="Start" />
  <button onclick="clearInterval(myTimer)">Stop counter</button>
</form>

String.prototype.padStart()

countdowntimer html javascript