1

我真的希望这里有人可以帮助我……尽管解释我正在寻找的东西有点复杂。

基本上我正在寻找一个“倒计时/倒计时”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% = 20 像素
  • 18000 秒。= 50% = 10 像素
  • 3600 秒。= 10% = 2 像素
  • 1800 秒。= 5% = 1 像素
  • 360 秒。= 1% = 0像素

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

但是，当计数达到第 36000 秒时。它不应该只是重新开始倒计时，而是停在那里并将第二个 div 的 className 从charging更改为charged。不用说，此时第一个 div 的 innerHTML 应该是 100%。从这里开始，脚本只会在点击第二个 div 时开始倒计时，在这种情况下，第二个 div 的 className 应该从charged back 变为indicator。

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

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

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

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

4

2 回答 2

0

你为什么不使用像每 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

于 2012-08-10T20:51:35.787 回答
0

这是新代码。它似乎可以正常工作，但它使用了 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);

}

​</p>

于 2012-08-10T21:01:58.967 回答