Javascript倒数计时器无法正确倒数秒/分钟

Question

我创建了一个倒数计时器。 但是，它不能正确倒数。 它没有以秒或分钟为单位递减计数，而是以千分之一秒递减计数，并且更新不正确。 我使用相同的代码创建了另一个递增计时器，但是它可以正确地按增量进行递增计数-每当60秒过去时，它就会计时分钟。 我想知道如何使此计时器正确倒数。

JSBin： http ： //jsbin.com/funiveremi/6/edit

更新*添加60秒计数器： http : //jsbin.com/hohusuvube/2/edit

的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Input Timer</title>
  <script type="text/javascript" src="part2.js"></script>
</head>
<body>

<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>

</body>
</html>

JAVASCIPT

hundreths = 10;
seconds = 15;
minutes = 20; 


document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;


var currentTime = document.getElementById('time');

var t;

function startClock() {
function add() {

    hundreths--;
    if (hundreths < 0) {
        hundreths = 0;
        seconds--;
        if (seconds < 0) {
            seconds = 0;
            minutes--;
        }
        if(minutes < 0) {
            seconds= 0;
            minutes= 0;
            stopTimer();

        }
    }



if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
  }
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}

else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}

else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}

   timer();
} // end function add();


function timer() {
    t = setTimeout(add, 100);
}
timer();
} // end function startClock();

function stopTimer() {
    document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
    clearTimeout(t);
} // end function stopTimer();


function resetTimer() {
clearTimeout(t);

  currentTime.innerHTML = "00:00:00";
} // end function resetTimer();

Answer 1

只需使用Jquery Countdown插件即可。

http://hilios.github.io/jQuery.countdown/

实施将更加容易。 这样的事情。

<div id="getting-started"></div>
<script type="text/javascript">
  $("#getting-started").countdown("2016/01/01", function(event) {
    $(this).text(event.strftime('%D days %H:%M:%S'));
  });
</script>

Answer 2

这将起作用，您具有何时设置错误秒数的逻辑，因此它会不断重置。 如果遇到这种情况，在这种情况下要做的最好的事情之一就是简单地尝试更改if语句，删除其中的一些语句并使用不同的值。 它可以帮助您教会系统中实际发生的事情，并为您提供错误提示。 另一个技巧是用普通英语大声朗读代码。 当您大声朗读它时，您常常会听到自己说的逻辑，从而意识到自己是错误的。

    hundreths--;
    if (hundreths < 0) {
        hundreths = 10;
        seconds--;
        if (seconds < 0) {
            seconds = 59;
            minutes--;
        }
        if(minutes < 0) {
            seconds= 0;
            minutes= 0;
            stopTimer();

        }
    }

Javascript倒数计时器无法正确倒数秒/分钟

问题描述

2 个解决方案

解决方案1
0 2015-04-07 03:08:01

解决方案2
0 2015-04-07 03:08:09

Javascript倒数计时器无法正确倒数秒/分钟

问题描述

2 个解决方案

解决方案1 0 2015-04-07 03:08:01

解决方案2 0 2015-04-07 03:08:09

解决方案1
0 2015-04-07 03:08:01

解决方案2
0 2015-04-07 03:08:09