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秒时，宽度应为18px）

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

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

然而，当计数达到第36000秒时。它不应该只是重新开始倒计时，而是暂停并将第二个div的className从充电更改为充电。不用说，第一个div的innerHTML在这一点上应该是100％。从这里开始，如果单击第二个div，脚本只会开始倒计时，在这种情况下，第二个div的className应该从收费变回指标。 / p>

此外，只要点击第二个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

Answer 2

这是新的代码..它似乎工作但它使用100秒，由于某种原因ID点击不再工作。您应该能够找到适合您特定秒数的设置。这是一个演示：http://jsfiddle.net/6anju/7/

$(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);

}

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

2 个答案: