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 增加分隔为始终运行的“滴答”超时，即使在暂停时也是如此（以便我们可以跟踪恢复的时间）。

因此，如果时钟没有暂停，tick 函数只会更新时间。

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 回答
0 
    <html>
    <head><title>Timer</title>
    <script>

    //Evaluate the expression at the specified interval using setInterval()
    var a = setInterval(function(){disp()},1000);

    //Write the display() for timer
    function disp()
    {
         var x = new Date(); 

         //locale is used to return the Date object as string
         x= x.toLocaleTimeString();

        //Get the element by ID in disp()
        document.getElementById("x").innerHTML=x;
    }
    function stop()
    {
         //clearInterval() is used to pause the timer
        clearInterval(a);
    }
    function start()
    {    
        //setInterval() is used to resume the timer
        a=setInterval(function(){disp()},1000);
    }

    </script>
    </head>
    <body>
    <p id = "x"></p>
    <button onclick = "stop()"> Pause </button>
    <button onclick = "start()"> Resume </button>
    </body>
    </html>
于 2016-03-16T17:05:04.680 回答