如何使用 javascript 让我的倒数计时器在达到 00:00 后开始计时

Question

我正在尝试制作一个倒数计时器，一旦它达到“00:00”，它应该会再次无限制地上升。

我不知道如何让我的倒计时到达“00:00”时开始，也许你可以帮助我。

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;

 // calculate the seconds (don't change this! unless time progresses at a               different speed for you...)
var secs = mins * 60;
var timeout;

function countdown() {
 timeout = setTimeout('Decrement()', 1000);
}


function colorchange(minutes, seconds)
{
 if(minutes.value =="00" && seconds.value =="59")
 {
minutes.style.color="orange";
seconds.style.color="orange";
 }
  else if(minutes.value =="00" && seconds.value =="30")
{
minutes.style.color="red";
seconds.style.color="red";
 }

}

function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining

if (seconds < 59) {
seconds.value = secs;

} else {
  minutes.value = getminutes();
  seconds.value = getseconds();
}
colorchange(minutes,seconds);

secs--;
if (secs < 0) {
  clearTimeout(timeout);
  return;
}
countdown();
 }
 }

 function getminutes() {
  // minutes is seconds divided by 60, rounded down
 mins = Math.floor(secs / 60);
  return ("0" + mins).substr(-2);
   }

  function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return ("0" + (secs - Math.round(mins * 60))).substr(-2);
   }

</script>
</head>
<body>

<div id="timer">
 This is only valid for the next <input id="minutes" type="text"       style="width: 110px; border: none; background-color:none; font-size: 100px;    font-weight: bold;"> :
 <input id="seconds" type="text" style="width: 110px; border: none;        background-color:none; font-size: 100px; font-weight: bold;"> 
</div>
<script>
countdown();
 </script>

Answer 1

tl;dr，但是您可以声明一个全局布尔值，如 var down = true;，一旦您的计时器达到 00:00，您只需将 down = true 更改为 down = false .

然后，在更改计数器的函数上添加：

if(down){
    Decrement();
}else{
    Increment():
}

并且，例如，如果您想在达到 13:54 时再次减少，您再次添加 down = true.

希望对您有所帮助！

Answer 2

我认为您当前的解决方案有点过于复杂。您有一个设置超时的函数，该函数调用另一个函数来完成工作，然后再次调用设置超时的函数。

不用那样做，只需使用 setInterval 方法即可。

与@JoColina 的建议类似，设置一个 direction 变量指示计数方向，然后设置不同的向上计数和向下计数行为。

var direction = 'down';
var mins = 1.1;
var secs = mins * 60;

function colorchange() {
  var className;
  if (direction == 'up') {
    className = 'success';
  } else if (secs <= 30) {
    className = 'danger';
  } else if (secs <= 59) {
    className = 'warning';
  }
  document.getElementById('timeText').className = className;
}

function getminutes() {
  // minutes is seconds divided by 60, rounded down
  mins = Math.floor(secs / 60);
  return ("0" + mins).substr(-2);
}

function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}

function countdown() {
  setInterval(function() {
    var minutes = document.getElementById('minutes');
    var seconds = document.getElementById('seconds');

    minutes.value = getminutes();
    seconds.value = getseconds();
    colorchange();

    if (direction == 'down') {
      secs--;
      if (secs <= 0) {
        direction = 'up';
      }
    } else if (direction == 'up') {
      secs++;
    }
  }, 1000);
}


countdown();

.success,
.success input {
  color: green;
}

.warning,
.warning input {
  color: orange;
}

.danger,
.danger input {
  color: red;
}

<div id="timer">
  This is only valid for the next
  <span id="timeText">
    <input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">:
    <input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
  </span>
</div>

如何使用 javascript 让我的倒数计时器在达到 00:00 后开始计时

How to make my countdown timer go up once it reaches 00:00 using javascript

javascript

timer

countdown