JavaScript:不仅仅是倒计时/计数脚本

Question

我真诚地希望有人可以帮助我解决这个问题......尽管解释我正在寻找的内容有点复杂。

基本上我正在寻找一个“倒计时/倒计时”javascript - 听起来很简单，对吧？

我发现了这种脚本的很多变体，但没有一个满足以下要求。

我特别需要的是一个在页面加载时从 36000 秒开始倒计时的脚本。当达到 0 秒时。立即开始倒数至 36000 秒。

同时，我有这两个 div，它们应该既影响脚本又受脚本影响:

<style>
.indicator {
width: 20px;
height: 8px;
}
</style>

<div class="percent">100%</div>
<div class="indicator"></div>

如您所见，第一个 div 的innerHTML 开始时为 100%，当脚本每 360 秒计数一次后，应减少 1。(例如:当计数超过第 3600 秒时，innerHTML 应为 90%)

第二个 div 的宽度为 20px，当脚本每计数超过 1800 秒时，宽度应减少 1px。(例如:当计数超过第 3600 秒时，宽度应为 18 像素)

• 36000 秒。 = 100% = 20 像素
• 18000 秒。 = 50% = 10 像素
• 3600 秒。 = 10% = 2 像素
• 1800 秒。 = 5% = 1 像素
• 360 秒。 = 1% = 0 像素

如前所述，脚本应在达到 0 秒时开始向上计数。发生这种情况时，第二个 div 的 className 应从 indicator 更改为 charging，并且第一个 div 的 innerHTML 应根据秒的过去计数适当增加。(与脚本向下计数时完全相同)

但是，当计数达到第 36000 秒时。它不应该再次开始倒计时，而是暂停并将第二个 div 的 className 从 charging 更改为 charged。不用说，第一个div的innerHTML此时应该是100%。从这里开始，脚本仅在单击第二个 div 时开始倒计时，在这种情况下，第二个 div 的 className 应从 charged 更改回 indicator。

此外，每当单击第二个 div 时，倒计时/正计时都会反转，同时更改其 className。

• 倒计时:<div class="indicator"></div>
• 计数:<div class="charging"></div>

对于冗长的解释和我糟糕的英语语法，我深表歉意......

希望有人能够理解这一点:)

Answer 1

为什么不使用类似计时器的东西，每 10 秒调用一次(因为您的更改点 mod 10 = 0)，并检查变量是否处于这些值之一。例如:

var totalTime = 36000;
var timeLeft = totalTime;

setInterval(countdown, 10000);

function countdown()
{
    timeLeft -= 10;

    //Change innerhtml to timeLeft/totalTime * 100 + "%";
}

至少我认为这应该能让你开始。不过，您可能会使用 setTimeout 来代替，这样您最终可以结束递减，并开始递增。

http://www.w3schools.com/js/js_timing.asp