如何更改倒计时的显示？

Question

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

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秒。怎么改？

Answer 1

这可以通过对现有代码进行少量修改来实现。您需要从 seconds 计算 mins 和 remaining 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()

如何更改倒计时的显示？

How to Change the display of countdown?

html

javascript

countdowntimer