2

以下のコードを使用して、秒単位のカウントダウンを行います。問題は、カウントダウンを含むページの一部がjquery .loadを使用して再度ロードされると、新しいカウントダウンが間違ってしまうことです。毎秒、次のように2秒が速く表示されます：9-8...7-6。 ..5-4 ...時計と同期していないかのように...そこで参照してください：aorbaroquethrash.com/test（問題が発生するためには、そこにいる間に曲を変更する必要があります）

どうすればこれを解決できるのでしょうか？ 

<script type = "text/javascript">
/*author Philip M. 2010*/

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs)-1;
ticker = setInterval("tick()",1000);   // every second
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
}

document.getElementById("countdown").innerHTML = secs;
} 
startTimer(<?php echo $stream['info']['length'];?>);

</script>

パトリック

4

3 に答える 3

8

経過秒数を表示または計算するには、独自のカウントを行うのではなく、現在のシステム時間を使用する必要があります。 setInterval()時間通りに完全に呼び出されることは保証されておらず、自分自身を数えるだけで累積エラーが発生する可能性があり、時間通りに呼び出されない場合は間違った時間が表示されます。

カウントを開始した時刻を記録し、各ティックで新しいシステム時刻を取得し、累積エラーなしでカウントを開始してから経過した時間を計算します。

また、文字列を に渡さないでくださいsetInterval()。スコープの問題やその他の潜在的な問題を防ぐため、実際の関数参照を渡します。

カウントダウン タイマーの動作コードの例を次に示します。

var startTime, countAmt, interval;

function now() {
  return ((new Date()).getTime());
}

function tick() {
  var elapsed = now() - startTime;
  var cnt = countAmt - elapsed;
  var elem = document.getElementById("counter");
  if (cnt > 0) {
    elem.innerHTML = Math.round(cnt / 1000);
  } else {
    elem.innerHTML = "0";
    clearInterval(interval);
  }
}

function startTimer(secs) {
  clearInterval(interval);
  document.getElementById("counter").innerHTML = secs;
  countAmt = secs * 1000;
  startTime = now();
  interval = setInterval(tick, 1000);  
}

startTimer(20);

実際のデモ: http://jsfiddle.net/jfriend00/mxntj/

于 2013-01-06T21:21:14.513 に答える
1

これを jfriend00 スクリプトに追加して、「分:秒」を取得しました。

function minute(secs){
    minVar = Math.floor(secs/60);
    secs = secs % 60;
    if (secs < 10) {
        secs = "0"+secs;
    }
    return minVar+":"+secs;
}

に追加: elem.innerHTML = minutes(Math.round(cnt / 1000)); および document.getElementById("countdown").innerHTML = minutes(secs);

于 2013-01-06T22:49:27.193 に答える
0

皆様のおかげです。

「clearInterval(ticker);」を追加する必要がありました 関数 startTimer の先頭。

于 2013-01-06T22:05:06.377 に答える