1

現在、タイマーを作成する次のコードがあります。

<script type="text/javascript">
var interval;
var minutes = 8;
var seconds = 10;

function countdown(element) {
    interval = setInterval(function() {
        var el = document.getElementById(element);
        if(seconds == 0) {
            if(minutes == 0) {
                alert(el.innerHTML = "countdown's over!");                    
                clearInterval(interval);
                return;
            } else {
                minutes--;
                seconds = 60;
            }
        }
        if(minutes > 0) {
            var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
        } else {
            var minute_text = '';
        }
        var second_text = seconds > 1 ? 'seconds' : 'second';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
        seconds--;
    }, 1000);
}
</script>

そして、次のボタンを使用してトリガーします。

<input type="button" onclick="countdown('countdown');" value="Start" />
<input type="button" onclick="clearInterval(interval);" value="Pause" />

タイマーを追跡し、時間の経過とともにページ スタイルを変更するにはどうすればよいですか?

たとえば、[開始] をクリックすると、1 つの div を強調表示したい場合、5 秒後に別の div を強調表示して最初の強調表示を解除したい場合、その 20 秒後にもう一度強調表示を変更したい場合、10 秒後にもう一度強調表示を変更したい場合、等々。

間隔は異なる時間にすることができますが、ほとんどの場合は上記のパターン (0、5、5、20、10、20、10、20、10...) に従うので、これが出発点として適しています。タイマーの合計の長さは常に 8 分なので、間隔をハード コードすることができ、PHP を使用して正しいコードを選択することができます (非効率ですが、おそらく最も簡単です)。

誰にもアイデアはありますか？

4

1 に答える 1

0

経過時間にswitch文を入れます。

指定された間隔ごとに、問題の div を設定し、他の設定を解除します。

//at the beginning of the script
var origtime = minutes*60+seconds;

//...snip to countdown function

var timeleft = minutes*60+seconds;
switch(origtime - timeleft)
{
case 0: highlightfirstdiv(); break;
case 5: highlightseconddiv(); break;
case 10: highlightthirddiv(); break;
...
case x: highlightfinaldiv(); break;
}
于 2012-05-02T16:18:12.840 に答える