javascript - 如何避免javascript倒计时器不走负数?

标签 javascript countdowntimer

我这里有一个倒计时,出于测试目的,我将其设置为10 秒,但一旦完善,我会将其设置为 30 分钟。一切都顺利进行,直到倒计时变成负数,我希望它是负数,但格式正确,并且不会从 0 跳转到 -01:00。 Math.Floor 似乎是个好主意,但使用这段代码它会立即运行负数。另外,一旦为负数,格式为 -00:0-0,我想要 -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>

最佳答案

这是一个下取整函数,根据您的需要,将 -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 - 如何避免javascript倒计时器不走负数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32210087/

相关文章:

android - 创建一个计时器,以秒、分钟、小时、天为单位显示事件的剩余时间

javascript - 将 ng-repeat 拆分为两个单独的 div 的最有效方法

javascript - 倒计时器 - 凌乱的 Javascript 函数

java - Android:当我在另一个 Activity 中时,如何保持倒数计时器运行并在超时时显示一条消息?

javascript - 变换后的矩形坐标

android - 如何在DD :HH:MM:SS format in android?中获取倒计时器

android - CountDownTimer : In Activity, ViewModel 还是单独的类?

javascript - JQuery 问题 "TypeError: $.getJSON is not a function"

javascript - 如何使用 javascript 将字典数组更改为表示数组中两个属性组合的子列表列表?

javascript - 有没有办法让 HTML div 像 body 标签一样工作?