Javascript paus/resume 一键完成

Question

我对我的一项职能感到困惑。我想做的是在页面加载后立即启动计时器，并且只有一个按钮带有 start/resume。我无法在代码中找出需要更改功能的地方。有人可以帮我吗？谢谢！

HTML:

<p id="komma">,</p>
<span id="time"></span>
<div id="buttons"><input type="button" value="start" onclick="start();" class="buttontimer">
<input type="button" value="stop" onclick="stop();"  class="buttontimer">
<input type="button" value="reset" onclick="reset()" class="buttontimer"> 
</div>

Javascript:

<script>
             // Simple example of using private variables
//
//  To start the stopwatch:
//      obj.start();
//
//  To get the duration in milliseconds without pausing / resuming:
//      var x = obj.time();
//
//  To pause the stopwatch:
//      var x = obj.stop(); // Result is duration in milliseconds
//
//  To resume a paused stopwatch
//      var x = obj.start();    // Result is duration in milliseconds
//
//  To reset a paused stopwatch
//      obj.stop();
//
 var    clsStopwatch = function() {
        // Private vars
        var startAt = 0;    // Time of last start / resume. (0 if not running)
        var lapTime = 0;    // Time on the clock when last stopped in milliseconds

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

        // Public methods
        // Start or resume
         this.start = function() {
                startAt = startAt ? startAt : now();
            };

        // Stop or pause
        this.stop = function() {
                // If running, update elapsed time otherwise keep it
                lapTime = startAt ? lapTime + now() - startAt : now();
                startAt = 0; // Paused
            };

        // Reset
        this.reset = function() {
                lapTime = startAt = 0; 
            }; 
    // Duration
        this.time = function() {
                return lapTime + (startAt ? now() - startAt : 0); 
            };
    }; 


var x = new clsStopwatch();
var $time;
var clocktimer;

function pad(num, size) {
    var s = "0000" + num;
    return s.substr(s.length - size);
}

function formatTime(time) {
    var s = ms = 0;
    var newTime = '';

    h = Math.floor( time / (60 * 60 * 1000) );
    time = time % (60 * 60 * 1000);
    m = Math.floor( time / (60 * 1000) );
    time = time % (60 * 1000);
    s = Math.floor( time / 60 + 2500);

     newTime =  pad(s,4) ;
         return newTime;

}


function show() {
    $time = document.getElementById('time');
    update();
}

 function update() {
    $time.innerHTML = formatTime(x.time());
}


function start() {
    clocktimer = setInterval("update()", 1);
    x.start();
}

function stop() {
    x.stop();
    clearInterval(clocktimer);
}

function reset() {
    stop();
    x.reset();
    update();
}

Answer 1

试试这个：

<p id="komma">,</p>
<span id="time"></span>
<div id="buttons"><input type="button" value="stop" onclick="toggleTimer(event);" class="buttontimer">
<input type="button" value="reset" onclick="reset()" class="buttontimer"> 
</div>

在 JS 中：

var isTimerStarted;

function start() {
    clocktimer = setInterval("update()", 1);
    x.start();
    isTimerStarted = true;
}

function stop() {
    x.stop();
    clearInterval(clocktimer);
    isTimerStarted = false;
}

start();

function toggleTimer(event) {
  if (isTimerStarted) {
    stop();
    event.target.value = 'Start';
  } else {
    start();
    event.target.value = 'Stop';
  }
}

 var    clsStopwatch = function() {
        // Private vars
        var startAt = 0;    // Time of last start / resume. (0 if not running)
        var lapTime = 0;    // Time on the clock when last stopped in milliseconds

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

        // Public methods
        // Start or resume
         this.start = function() {
                startAt = startAt ? startAt : now();
            };

        // Stop or pause
        this.stop = function() {
                // If running, update elapsed time otherwise keep it
                lapTime = startAt ? lapTime + now() - startAt : now();
                startAt = 0; // Paused
            };

        // Reset
        this.reset = function() {
                lapTime = startAt = 0; 
            }; 
    // Duration
        this.time = function() {
                return lapTime + (startAt ? now() - startAt : 0); 
            };
    }; 


var x = new clsStopwatch();
var $time;
var clocktimer;

function pad(num, size) {
    var s = "0000" + num;
    return s.substr(s.length - size);
}

function formatTime(time) {
    var s = ms = 0;
    var newTime = '';

    h = Math.floor( time / (60 * 60 * 1000) );
    time = time % (60 * 60 * 1000);
    m = Math.floor( time / (60 * 1000) );
    time = time % (60 * 1000);
    s = Math.floor( time / 60 + 2500);

     newTime =  pad(s,4) ;
         return newTime;

}


function show() {
    $time = document.getElementById('time');
    update();
}

show();

 function update() {
    $time.innerHTML = formatTime(x.time());
}

var isTimerStarted;

function start() {
    clocktimer = setInterval("update()", 1);
    x.start();
    isTimerStarted = true;
}

function stop() {
    x.stop();
    clearInterval(clocktimer);
    isTimerStarted = false;
}

start();

function toggleTimer(event) {
  if (isTimerStarted) {
    stop();
    event.target.value = 'Start';
  } else {
    start();
    event.target.value = 'Stop';
  }
}

function reset() {
    stop();
    x.reset();
    update();
}

<p id="komma">,</p>
<span id="time"></span>
<div id="buttons"><input type="button" value="stop" onclick="toggleTimer(event);" class="buttontimer">
<input type="button" value="reset" onclick="reset()" class="buttontimer"> 
</div>

Javascript paus/resume 一键完成

Javascript paus/resume in one button

javascript

button

pageload

pause