[英]Stop watch program in Javascript starting on window load, rather than onclick
我试图编写一个JavaScript秒表，但是我很困惑为什么它在窗口加载时开始而不是在单击“开始”按钮时开始。 非常感谢您的帮助，我知道停止和重置功能中还有其他错误，但是我从此开始。 我对JS还是陌生的，如果这很简单，我深表歉意。 据我了解onload功能已设置。 用户单击“开始”按钮时，应调用startStopwatch函数。 此函数每10毫秒调用一次tickStopwatch，并相应地更新秒表跨度。 我仍然还必须执行停止和重置功能，但clearInterval似乎不起作用。 再次感谢您的帮助。
提前致谢。
"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); };
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; }
<!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"> </span>: <span id="minutes"> </span>: <span id="seconds"> </span> <span id="ampm"> </span> </fieldset> <fieldset> <legend>Stop Watch</legend> <a href="#" id="start">Start</a> <a href="#" id="stop">Stop</a> <a href="#" id="reset">Reset</a> <span id="s_minutes">00</span>: <span id="s_seconds">00</span>: <span id="s_ms">000</span> </fieldset> </main> </body> </html>
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);};
};
将函数设置为按钮动作而不是传递函数本身的古老错误。 我已经删除了对$("start").onclick = startStopwatch;上的函数的调用$("start").onclick = startStopwatch; 在下面的代码段中
"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; };
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; }
<!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"> </span>: <span id="minutes"> </span>: <span id="seconds"> </span> <span id="ampm"> </span> </fieldset> <fieldset> <legend>Stop Watch</legend> <a href="#" id="start">Start</a> <a href="#" id="stop">Stop</a> <a href="#" id="reset">Reset</a> <span id="s_minutes">00</span>: <span id="s_seconds">00</span>: <span id="s_ms">000</span> </fieldset> </main> </body> </html>
Javascript 模态 window 代码重新配置为在页面加载时加载，而不是 onclick。 帮助：）
[英]Javascript modal window code reconfigured to load on page load rather than onclick. Help :)
onClick 每次点击都会减少数字，而不是启动计时器
[英]onClick decreases the number with each click rather than starting the timer
我可以将jQuery动态加载到局部变量而不是窗口吗？
[英]Can I load jQuery dynamically to a local variable rather than to window?
为什么我的JavaScript程序没有将其转换为整数而不是字符串？
[英]Why my javascript program is not converting it to integer rather than string?
在父 class 中包含 javascript class，而不是在加载时包含在 Z05B8C74CBD96FBF2DE4C1A352702FFF4Z 中
[英]Include a javascript class in a parent class, rather than in window when it is loaded
Javascript窗口关闭事件而不是所有浏览器的卸载事件
[英]Javascript window close event rather than unload event for all browsers
在页面加载中检索数据库记录而不是在Javascript中的键盘功能
[英]Retrieving Database Records on Page Load rather than keyup function in Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.