7

ボタンをクリックするたびに、この形式の00:00:00でタイマーを開始するこの関数を取得しました。しかし、関数の再開と一時停止の方法がわかりません。役立つと思われるスニペットをいくつか見つけましたが、それらを機能させることができませんでした。jsでオブジェクトを使用するのは初めてです。

function clock() {
  var pauseObj = new Object();

  var totalSeconds = 0;
  var delay = setInterval(setTime, 1000);

  function setTime() {
    var ctr;
    $(".icon-play").each(function () {
      if ($(this).parent().hasClass('hide')) ctr = ($(this).attr('id')).split('_');
    });

    ++totalSeconds;
    $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds / 3600)));
    $("#min_" + ctr[1]).text(pad(Math.floor((totalSeconds / 60) % 60)));
    $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds % 60)));
  }
}

pad（）は先行ゼロを追加するだけです

4

4 に答える 4

20

時計オブジェクトを作成していただけるとより良いと思います。コードを参照してください (デモを参照してください: http://jsfiddle.net/f9X6J/ ):

var Clock = {
  totalSeconds: 0,

  start: function () {
    var self = this;

    this.interval = setInterval(function () {
      self.totalSeconds += 1;

      $("#hour").text(Math.floor(self.totalSeconds / 3600));
      $("#min").text(Math.floor(self.totalSeconds / 60 % 60));
      $("#sec").text(parseInt(self.totalSeconds % 60));
    }, 1000);
  },

  pause: function () {
    clearInterval(this.interval);
    delete this.interval;
  },

  resume: function () {
    if (!this.interval) this.start();
  }
};

Clock.start();

$('#pauseButton').click(function () { Clock.pause(); });
$('#resumeButton').click(function () { Clock.resume(); });
于 2012-09-19T01:42:26.623 に答える
1

totalSeconds がインクリメントされないため、間隔をクリアするだけでは機能しません。時計が一時停止しているかどうかを判断するフラグを設定します。

このフラグは、pause() の呼び出し時に設定されるか、resume() の呼び出し時に設定解除されます。totalSeconds の増加を、一時停止中でも常に実行される「ティック」タイムアウトに分けました (再開時の時間を追跡できるようにするため)。

したがって、ティック関数は、時計が一時停止していない場合にのみ時間を更新します。

function clock()
{
    var pauseObj = new Object();

    var totalSeconds = 0;
    var isPaused = false;
    var delay = setInterval(tick, 1000);

    function pause()
    {
        isPaused = true;
    }

    function resume()
    {
        isPaused = false;
    }

    function setTime()
    {
        var ctr;
        $(".icon-play").each(function(){
            if( $(this).parent().hasClass('hide') )
                ctr = ($(this).attr('id')).split('_');
        });

        $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds/3600)));
        $("#min_" + ctr[1]).text(pad( Math.floor((totalSeconds/60)%60)));
        $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds%60)));
    }

    function tick()
    {
        ++totalSeconds;

        if (!isPaused)
           setTime();
    }
}
于 2012-09-19T01:32:15.170 に答える
0

で設定した繰り返し動作を取り消すには、window.clearIntervalを使用しsetInterval()ます。

clearInterval(delay);
于 2012-09-19T01:28:00.683 に答える