从窗口加载开始在Javascript中停止监视程序，而不是onclick

Question

我正在尝试编写一个javascript stop watch，但是我很难过为什么它开始于窗口加载而不是＆＃34; start＆＃34;单击按钮。非常感谢任何帮助，我知道停止和重置功能还有其他错误，但我从这个开始。我还是JS的新手，所以如果这非常简单，我道歉。据我了解onload，onclick函数已设置。当用户点击＆＃34;开始＆＃34;按钮应该调用startStopwatch函数。此功能每10ms调用一次tickStopwatch并相应地更新秒表范围。我仍然需要执行停止和重置功能，但clearInterval似乎不起作用。再次，非常感谢任何帮助。

提前致谢。

＆＃13;

＆＃13;

"use strict";
var $ = function(id) { return document.getElementById(id); };
var evt = {
    attach: function(node, eventName, func) {

    },
    detach: function(node, eventName, func) {

    },
    preventDefault: function(e) {

    }
};

//global stop watch timer variable and elapsed time object
var stopwatchTimer;
var elapsedMinutes = 0;
var elapsedSeconds = 0;
var elapsedMilliseconds = 0;

var displayCurrentTime = function() {
    var now = new Date();
    var hours = now.getHours();
    var ampm = "AM"; // set default value

    // correct hours and AM/PM value for display
    if (hours > 12) { // convert from military time
        hours = hours - 12;
        ampm = "PM";
    } else { // adjust 12 noon and 12 midnight
        switch (hours) {
            case 12: // noon
                ampm = "PM";
                break;
            case 0:  // midnight
                hours = 12;
                ampm = "AM";
        }
    }
    $("hours").firstChild.nodeValue = hours;
    $("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());
    $("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());
    $("ampm").firstChild.nodeValue = ampm;
};

var padSingleDigit = function(num) {
	if (num < 10) {	return "0" + num; }
	else { return num; }
};

var tickStopwatch = function() {
    // increment milliseconds by 10 milliseconds
    elapsedMilliseconds += 10;
    // if milliseconds total 1000, increment seconds by one and reset milliseconds to zero
    if (elapsedMilliseconds >= 1000) {
        elapsedSeconds += 1;
        elapsedMilliseconds = 0;
    }
    // if seconds total 60, increment minutes by one and reset seconds to zero
    if (elapsedSeconds >= 60) {
        elapsedMinutes += 1;
        elapsedSeconds = 0;
    }
    //display new stopwatch time
    $("s_ms").innerHTML = elapsedMilliseconds;
    $("s_seconds").innerHTML = elapsedSeconds;
    $("s_minutes").innerHTML = elapsedMinutes;
};

var startStopwatch = function(evt) {
    // prevent default action of link
    if (!evt) { evt = window.event; }
    if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnFalse = false; }
    // do first tick of stop watch and then set interval timer to tick
    setInterval(tickStopwatch, 10);
    stopwatchTimer = setInterval(tickStopwatch, 10);
    // ??? stop watch every 10 milliseconds. Store timer object in stopwatchTimer 
    // ??? variable so next two functions can stop timer.
};

var stopStopwatch = function(evt) {
    if (!evt) { evt = window.event; }
    if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnFalse = false; }
    // prevent default action of link
    clearInterval(stopwatchTimer);
    // stop timer
};

var resetStopwatch = function(evt) {
    // prevent default action of link
    if (!evt) { evt = window.event; }
    if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnFalse = false; }
    // stop timer
    clearInterval(stopwatchTimer);
    // reset elapsed variables and clear stopwatch display
    $("s_ms").innerHTML = "000";
    $("s_seconds").innerHTML = "00";
    $("s_minutes").innerHTML = "00";
    elapsedMilliseconds = 0;
    elapsedMinutes = 0;
    elapsedSeconds = 0;

    
};

window.onload = function() {
    // set initial clock display and then set interval timer to display new time every second.
    displayCurrentTime();
    setInterval(displayCurrentTime, 1000);
    // set up stopwatch event handlers
    $("start").onclick = startStopwatch(evt);
    $("stop").onclick = stopStopwatch(evt);
    $("reset").onclick = resetStopwatch(evt);
};

＆＃13;

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 450px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
}
label {
    float: left;
    width: 11em;
    text-align: right;
    padding-bottom: .5em;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
fieldset {
    margin-bottom: 1em;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">	
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
    <script src="library_event.js"></script>
    <script src="clock.js"></script>
</head>
<body>
    <main>
        <h1>Digital clock with stopwatch</h1>
        <fieldset>
            <legend>Clock</legend>
            <span id="hours">&nbsp;</span>:
            <span id="minutes">&nbsp;</span>:
            <span id="seconds">&nbsp;</span>&nbsp;
            <span id="ampm">&nbsp;</span>
        </fieldset>
        
        <fieldset>
        <legend>Stop Watch</legend>
        <a href="#" id="start">Start</a>&nbsp;
        <a href="#" id="stop">Stop</a>&nbsp;
        <a href="#" id="reset">Reset</a>&nbsp;
        <span id="s_minutes">00</span>:
        <span id="s_seconds">00</span>:
        <span id="s_ms">000</span>
    </fieldset>
</main>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

onclick的值必须是一个函数。您立即调用该函数，而不是返回函数引用。

window.onload = function() {
    // set initial clock display and then set interval timer to display new time every second.
    displayCurrentTime();
    setInterval(displayCurrentTime, 1000);
    // set up stopwatch event handlers
    $("start").onclick = function() { startStopwatch(evt);};
    $("stop").onclick = function() { stopStopwatch(evt);};
    $("reset").onclick = function() { resetStopwatch(evt);};
};

Answer 2

将函数设置为按钮操作时调用函数的老错误，而不是传递函数本身。我已删除了以下代码段中$("start").onclick = startStopwatch;上对该功能的调用。

＆＃13;

＆＃13;

"use strict";
var $ = function(id) { return document.getElementById(id); };
var evt = {
    attach: function(node, eventName, func) {

    },
    detach: function(node, eventName, func) {

    },
    preventDefault: function(e) {

    }
};

//global stop watch timer variable and elapsed time object
var stopwatchTimer;
var elapsedMinutes = 0;
var elapsedSeconds = 0;
var elapsedMilliseconds = 0;

var displayCurrentTime = function() {
    var now = new Date();
    var hours = now.getHours();
    var ampm = "AM"; // set default value

    // correct hours and AM/PM value for display
    if (hours > 12) { // convert from military time
        hours = hours - 12;
        ampm = "PM";
    } else { // adjust 12 noon and 12 midnight
        switch (hours) {
            case 12: // noon
                ampm = "PM";
                break;
            case 0:  // midnight
                hours = 12;
                ampm = "AM";
        }
    }
    $("hours").firstChild.nodeValue = hours;
    $("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());
    $("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());
    $("ampm").firstChild.nodeValue = ampm;
};

var padSingleDigit = function(num) {
	if (num < 10) {	return "0" + num; }
	else { return num; }
};

var tickStopwatch = function() {
    // increment milliseconds by 10 milliseconds
    elapsedMilliseconds += 10;
    // if milliseconds total 1000, increment seconds by one and reset milliseconds to zero
    if (elapsedMilliseconds >= 1000) {
        elapsedSeconds += 1;
        elapsedMilliseconds = 0;
    }
    // if seconds total 60, increment minutes by one and reset seconds to zero
    if (elapsedSeconds >= 60) {
        elapsedMinutes += 1;
        elapsedSeconds = 0;
    }
    //display new stopwatch time
    $("s_ms").innerHTML = elapsedMilliseconds;
    $("s_seconds").innerHTML = elapsedSeconds;
    $("s_minutes").innerHTML = elapsedMinutes;
};

var startStopwatch = function(evt) {
    // prevent default action of link
    if (!evt) { evt = window.event; }
    if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnFalse = false; }
    // do first tick of stop watch and then set interval timer to tick
    setInterval(tickStopwatch, 10);
    stopwatchTimer = setInterval(tickStopwatch, 10);
    // ??? stop watch every 10 milliseconds. Store timer object in stopwatchTimer 
    // ??? variable so next two functions can stop timer.
};

var stopStopwatch = function(evt) {
    if (!evt) { evt = window.event; }
    if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnFalse = false; }
    // prevent default action of link
    clearInterval(stopwatchTimer);
    // stop timer
};

var resetStopwatch = function(evt) {
    // prevent default action of link
    if (!evt) { evt = window.event; }
    if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnFalse = false; }
    // stop timer
    clearInterval(stopwatchTimer);
    // reset elapsed variables and clear stopwatch display
    $("s_ms").innerHTML = "000";
    $("s_seconds").innerHTML = "00";
    $("s_minutes").innerHTML = "00";
    elapsedMilliseconds = 0;
    elapsedMinutes = 0;
    elapsedSeconds = 0;

    
};

window.onload = function() {
    // set initial clock display and then set interval timer to display new time every second.
    displayCurrentTime();
    setInterval(displayCurrentTime, 1000);
    // set up stopwatch event handlers
    $("start").onclick = startStopwatch;
    $("stop").onclick = stopStopwatch;
    $("reset").onclick = resetStopwatch;
};

＆＃13;

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 450px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
}
label {
    float: left;
    width: 11em;
    text-align: right;
    padding-bottom: .5em;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
fieldset {
    margin-bottom: 1em;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">	
    <title>Clock</title>
    <link rel="stylesheet" href="clock.css">
    <script src="library_event.js"></script>
    <script src="clock.js"></script>
</head>
<body>
    <main>
        <h1>Digital clock with stopwatch</h1>
        <fieldset>
            <legend>Clock</legend>
            <span id="hours">&nbsp;</span>:
            <span id="minutes">&nbsp;</span>:
            <span id="seconds">&nbsp;</span>&nbsp;
            <span id="ampm">&nbsp;</span>
        </fieldset>
        
        <fieldset>
        <legend>Stop Watch</legend>
        <a href="#" id="start">Start</a>&nbsp;
        <a href="#" id="stop">Stop</a>&nbsp;
        <a href="#" id="reset">Reset</a>&nbsp;
        <span id="s_minutes">00</span>:
        <span id="s_seconds">00</span>:
        <span id="s_ms">000</span>
    </fieldset>
</main>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;