JavaScript：不仅仅是倒计时/倒计时脚本

我真的希望这里有人能帮我解决这个问题。。。尽管解释我要找的东西有点复杂

基本上，我在寻找一个“倒计时/倒计时”javascript——听起来很直接，对吧

我发现这种脚本有很多变体，但没有一个符合以下要求

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

同时，我有两个div，这两个div应该同时生效并受脚本的影响：

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

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

.指标{
宽度：20px；
高度：8px；
}
100%

如您所见，第一个div的innerHTML开始时为100%，当脚本计数超过每360秒时，应该减少1。 （例如：当计算超过3600秒时，innerHTML应为90%）

第二个div的宽度为20px，当脚本计数超过每1800秒时，宽度应减少1px。 （例如：当计数超过3600秒时，宽度应为18px）

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

如前所述，脚本应在达到0秒时开始向上计数。 当发生这种情况时，第二个div的类名应该从指示符更改为充电，并且第一个div的innerHTML应该根据证券交易委员会统计的过去适当增加。 （与脚本向下计数时完全相同）

但是，当倒计时达到36000秒时。它不应该再开始倒数计时，而是在那里停下来，将第二个div的类名从charging更改为charging。 不用说，第一个div的innerHTML此时应该是100%。 从这里开始，只有在单击第二个div时，脚本才开始倒计时，在这种情况下，第二个div的类名应该从充电变回指示器

此外，每当单击第二个div时，倒计时/倒计时将被反转，同时更改其类名

• 倒计时：

• 倒计时：

我为冗长的解释和糟糕的英语语法道歉

---

希望有人能理解这一点：）

为什么不使用像计时器这样的东西，每10秒调用一次（因为你的变化点mod 10=0），然后检查变量是否处于这些值之一。例如：

var totalTime = 36000;
var timeLeft = totalTime;

setInterval(countdown, 10000);

function countdown()
{
    timeLeft -= 10;

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

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

---

这是新代码。。它似乎在工作，但它需要100秒，出于某种原因，ID点击不再工作。您应该能够找到它来为您的特定秒设置工作。下面是一个演示：

$（文档）.ready（函数（）{
count_down（）；//解释很清楚。但是你应该写下你已经尝试过的，否则听起来像是，请为我写我的代码！关于“这就是我正在做的，为什么它不起作用？”查看，这是演示您尝试过的内容并让我们对其进行修补以使其生效的好方法。您的问题看起来很有趣，因此我开始使用小提琴。我没有时间处理东西，但也许您希望看到我迄今为止所做的。看起来很棒！我完成了倒计时/倒计时：）你是否应该有更多的时间来摆弄剩下的部分（比如，在倒计时或倒计时结束时，立即反转计数方向onclick、更改onclick类名onclick和更改className）我很想看看你的想法：）我已经将类改为id，并尝试运行它，但不幸的是它似乎不起作用。如中所示，似乎没有进行计数。但看看你的脚本，似乎你已经获得了其中的主要功能，如：当达到0秒时立即计数，停止在36000秒时开始计时，在计数结束时更改id，在单击时更改id。唯一缺少的是通过一次单击事件瞬间更改计数方向的能力。我非常感谢您的努力，并希望如果您有更多的时间，您可能愿意再次浏览。ThxHey@burmat我已经开始摆弄y我们的脚本希望你能帮助我让它工作：）@Ace:我现在正在工作..我马上就看到了几个错误。当你说36000时，你是指36秒（在JavaScipt中是36000秒），还是指36000秒的实时。
$(document).ready(function(){
    count_down(); //<-- When the page loads

    $('.indicator').click(function() {
        /** This works.. Just make sure you change the ID's properly **/
    });

    //*  Not working correctly. jQuery version type correct? *//
    $('#charging').click(function() {
        // Change ID back:
        var change_id = document.getElementById('charging');
        change_id.id = "indicator";
        count_down();
    });

    $('#charged').click(function() {
        // Change ID back:
        var change_id = document.getElementById('charged');
        change_id.id = "indicator";
        count_down();
    });

});

function count_down() {

    var counter = 100000; // 100 seconds
    var change_width_every = 5; // Change every 5 seconds
    var current_width = 20;  // Current width in px
    var current_percent = 100; // Current percent

    // Count down and run every 1 second
    var count_down = setInterval(function() {

        counter = counter - 1000; // Take a second away
        current_percent--; // Take away 1 percent
        change_width_every--;  // Take away 1 from the 5 seconds befor width change
        document.getElementById('percent').innerHTML = current_percent + "%"; // Edit the percent div

        if (change_width_every <= 0) { // If we exhaust our 5
            current_width--; // Edit your current width integer
            document.getElementById('indicator').style.width = current_width + "px"; // update the battery
            change_width_every = 5; // reinitialize
        }

        if (counter <= 0) {
            clearInterval(count_down); // kill the counter
            count_up(); // start counting up
        }

    }, 1000);
}

function count_up() {

    var counter = 0;
    var change_width_every = 5
    var current_width = 0;
    var current_percent = 0;
    // change the id to charging:
    var change_id = document.getElementById('indicator');
    change_id.id = 'charging';

    var counting = setInterval(function() {

        counter = counter + 1000;
        current_percent++;
        change_width_every--;
        document.getElementById('percent').innerHTML = current_percent + "%";

        if (change_width_every <= 0) {
            current_width++;
            document.getElementById('charging').style.width = current_width + "px";
            change_width_every = 5 // reinitialize
        }

        if (counter >= 100000) {
            change_id = document.getElementById('charging');
            change_id.id = "charged";
            clearInterval(counting);
        }

    }, 1000);

}