1

私が探しているものを説明するのはやや複雑ですが、ここの誰かがこれを手伝ってくれることを真剣に願っています.

基本的に、私は「カウントダウン/カウントアップ」JavaScript を探しています。

この種のスクリプトの多くのバリエーションを見つけましたが、次の要件を満たしているものはありません。

特に必要なのは、ページの読み込み時に 36000 秒からカウントダウンを開始するスクリプトです。そして0秒に達したとき。すぐに 36000 秒までカウントバックを開始します。

一方、スクリプトによって影響を受ける必要があるこれらの 2 つの 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% になるはずです)

2 番目の div の幅は 20 ピクセルで、スクリプトが 1800 秒ごとにカウントされると 1 ピクセルずつ縮小する必要があります。 (例: 3600 秒を超えてカウントする場合、幅は 18px にする必要があります)

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

前述のように、スクリプトは 0 秒に達した時点でカウントアップを開始する必要があります。これが発生すると、2 番目の div の className がindicatorからchargeに変更され、最初の div の innerHTML が秒のカウントされた過去に従って適切に増加する必要があります。 （スクリプトがカウントダウンしていたときとまったく同じ）

ただし、カウントアップが 36000 秒に達すると、再びカウントダウンを開始するだけではなく、そこで一時停止して、2 番目の div の className を chargeing からcharged に変更することになっています。言うまでもなく、この時点で最初の div の innerHTML は 100% になっているはずです。これ以降、スクリプトは 2 番目の div がクリックされた場合にのみカウントダウンを開始します。この場合、2 番目の div の className は charge back からindicatorに変更する必要があります。

さらに、2 番目の div がクリックされるたびにカウントダウン/カウントアップが逆になり、同時にその className が変更されます。

  • カウントダウン：<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 に答える