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变量来指示要计算的方向，然后设置不同的行为以计算和倒计时。

＆＃13;

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();

＆＃13;

.success,
.success input {
  color: green;
}

.warning,
.warning input {
  color: orange;
}

.danger,
.danger input {
  color: red;
}

＆＃13;

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

＆＃13;

如何使用javascript使我的倒数计时器一旦达到00:00就会上升

2 个答案: