如何避免 javascript 倒计时不为负值？

Question

我在这里设置了倒计时，出于测试目的，我将其设置为 10 秒，但一旦完成，我会将其设置为 30 分钟。一切都运行顺利，直到倒计时变为负数，我希望它是负数，但格式正确并且它不会从 0 跳到 -01:00。 Math.Floor 似乎是个好主意，但使用此代码它运行立即带有负数。此外，一旦为负，格式为 -00:0-0，I would like -00:00.

格式为负数后如何固定？

请不要使用面向对象，我们的网络服务器已经过时好几年了。

var seconds = 10;
function secondPassed() {
  var minutes = Math.round((seconds - 30)/60);
  var remainingSeconds = seconds % 60; 

  if (remainingSeconds < 10) 
  {
    remainingSeconds = "0" + remainingSeconds;  
  }

  document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
  if (seconds > 0) {
    seconds--;
    if (seconds > 8) {
      document.body.style.backgroundColor = "green"; }
    else if (seconds == 8) {document.body.style.backgroundColor = "yellow";}
    else if (seconds == 3) {document.body.style.backgroundColor = "red";}
  }
  else{
    seconds--;
  }
}
var countdownTimer = setInterval('secondPassed()', 1000);

<body onload = "getSeconds()">
  <p align ="center">
    <span id="countdown" style="color:black; font-size: 20px; font-weight: bold"> </span>
  </p>
</body>

Answer 1

我认为最简单的方法是始终将秒数视为正数，然后显示 - 如果它实际上是负数：

var abs_seconds = Math.abs(seconds);
var is_negative = seconds < 0;
var minutes = Math.round((abs_seconds - 30)/60);
var remainingSeconds = abs_seconds % 60; 
if (remainingSeconds < 10) 
{
    remainingSeconds = "0" + remainingSeconds;  
}
document.getElementById('countdown').innerHTML = (is_negative ? '-' : '') + minutes + ":" + remainingSeconds;
seconds--;
if (!is_negative) {
    if (seconds > 8) {
        document.body.style.backgroundColor = "green"; 
    } else if (seconds == 8) {
        document.body.style.backgroundColor = "yellow";
    } else if (seconds == 3) {
        document.body.style.backgroundColor = "red";
    }
}

https://jsfiddle.net/sdd8ubxh/2/

Answer 2

对于四舍五入，我认为使用 parseInt() 而不是 Math.floor() 会得到你想要的（截断）。

关于格式，我想你需要检查剩余秒数是否小于0：

var isNegative = false;
if(seconds < 0)
{
    isNegative = true;
    remainingSeconds = Math.abs(remainingSeconds);
}

如果 isNegative.

，则稍后在前面添加“-”

Answer 3

这里有一个 floor 函数，可以根据需要将 -0.5 舍入为 0，将 -1.5 舍入为 -1：

function floor(x) {
    return x | 0;
}

这是一个填充函数，可以正确地用 0 填充整数：

function pad(n) {
    if (n < 0) {
      n = -n;
    }
    if (n < 10) {
        return '0' + n.toString();
    }
    return n.toString();
}

您的代码变为：

<html>
    <head>
    <title>Countdown</title>
    <script type="text/javascript">
    var seconds = 10;

    function floor(x) {
        return x | 0;
    }

    function pad(n) {
        if (n < 0) {
          n = -n;
        }
        if (n < 10) {
            return '0' + n.toString();
        }
        return n.toString();
    }

    function secondPassed() {
        var minutes = pad(floor(seconds/60));
        if (seconds < 0) {
            minutes = '-' + minutes;
        }
        var remainingSeconds = pad(seconds % 60); 

        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds > 0) {
            seconds--;
            if (seconds > 8) {
            document.body.style.backgroundColor = "green"; }
            else if (seconds == 8) {document.body.style.backgroundColor = "yellow";}
            else if (seconds == 3) {document.body.style.backgroundColor = "red";}
        }
        else{
        seconds--;
        }
    }
    var countdownTimer = setInterval('secondPassed()', 1000);
    </script>
    </head>
    <body onload = "getSeconds()">
    <p align ="center">
    <span id="countdown" style="color:black; font-size: 20px; font-weight: bold">     </span>
    </p>
    </body>
    </html>

如何避免 javascript 倒计时不为负值？

How to avoid javascript countdown timer not to go negative?

javascript

countdowntimer