1 
function timer(time,max) {
   if(time-1>=0) {
     --time;
       $("#timer2").html(Math.ceil(time/100));
          pix = Math.round((time/max)*100);
   document.getElementById('timer').style.width = pix+"%";
  setTimeout("timer("+time+","+max+")",10);
  }
 }

それがジャバスクリプトです。

 You have <font style='color: #ff0' id='timer2'><?PHP echo $time; ?></font> seconds left until you can skill again<br>
<div style='background-color: black; width: 100px;'>
    <div style='background-color: #ffd700; text-align: center; width: 100%' id='timer'>&nbsp;
    </div>
</div>
<script>
    timer(<?PHP echo $time*100; ?>,<?PHP echo $time*100; ?>);
</script>

基本的に、時間は X 秒です。タイマーは 10 ミリ秒ごとに実行されるため、バーは滑らかに見えます。問題は、そのタブから出ると動きが止まるということです。これを行うためにこのコードを治す方法はありますか?

ありがとう！

4

2 に答える 2

1

すでに jQuery を使用している場合は、jQuery タイマープラグインを確認してください。

于 2012-12-11T18:41:05.103 に答える
1

最新のブラウザーでは、タブが非アクティブなときにタイムアウトと間隔が抑制されるため、タブが非アクティブな間、タイマー関数は 1 秒あたり 100 回ではなく、1 秒あたり 1 回だけ起動します。

これを回避するには、アニメーションの開始時刻を保存する必要がありますDate.now()(開始からの経過時間について。

例 ( jsfiddle )

timer = function(max) {
    if (timer.start === undefined) timer.start = Date.now();
    if (timer.max === undefined) timer.max = max;

    var max = timer.max,
        elapsed = Date.now() - timer.start,
        left = Math.max(max - elapsed, 0),
        pctLeft = Math.min(left/max, 1);

    $('#timer2').html(Math.ceil(left/1000));
    $('#timer').css('width', pctLeft * 100 + '%');

    if (left > 0) setTimeout(timer, 30);
    else timer.start = timer.max = undefined;
 }

timer(5000);
​
于 2012-12-11T18:53:05.717 に答える