我需要将事件处理程序附加到update函数,以便“停止”按钮将停止时间,而“开始”按钮将再次启动时间。
我尝试了多种方法来实现,如函数处理程序所示。但是我似乎无法使它正常工作。
stop = document.getElementById('Stop');
var watchRunning = new Boolean(false);
Start.addEventListener('click', startHandler);
function startHandler() {
d.watchRunning = true;
}
Stop.addEventListener('click', stopHandler);
function stopHandler() {
stop.onclick = function() {
clearTimeout(watchRunning);
}
}
update();
var testVar = window.setInterval(update, 10);
var seconds;
var milliseconds;
var d;
function update() {
d = new Date();
seconds = d.getSeconds();
milliseconds = Math.floor((d.getMilliseconds() / 10));
if (milliseconds < 10 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ":0" + milliseconds;
} else if (milliseconds < 10 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ":0" + milliseconds;
} else if (milliseconds >= 0 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ":" + milliseconds;
} else if (milliseconds >= 0 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ":" + milliseconds;
}
}
#Time {
background-color: yellow;
max-width: 5%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
有什么办法可以做这些工作?我需要在哪里更新更新功能?任何提示都有帮助。
答案 0 :(得分:1)
好吧,当尚未按下“开始”键时,我要做的只是setInterval
;和clearInterval
位于“停止”位置。
剧透:
const stop = document.getElementById('Stop');
const start = document.getElementById('Start');
let watchIntervalTimer;
function startHandler() {
if (!watchIntervalTimer) { // If it's not set.
watchIntervalTimer = setInterval(update, 10);
}
}
function stopHandler() {
clearInterval(watchIntervalTimer);
watchIntervalTimer = null; // So we can identify that it's reset.
}
Start.addEventListener('click', startHandler);
Stop.addEventListener('click', stopHandler);
update();
var seconds;
var milliseconds;
var d;
function update() {
d = new Date();
seconds = d.getSeconds();
milliseconds = Math.floor((d.getMilliseconds() / 10));
if (milliseconds < 10 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ":0" + milliseconds;
} else if (milliseconds < 10 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ":0" + milliseconds;
} else if (milliseconds >= 0 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ":" + milliseconds;
} else if (milliseconds >= 0 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ":" + milliseconds;
}
}
#Time {
background-color: yellow;
max-width: 5%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
答案 1 :(得分:1)
如果您想减去时间,这是您可以做的。
扰流器:
const stop = document.getElementById('Stop');
const start = document.getElementById('Start');
let watchIntervalTimer;
let countingSince;
function startHandler() {
if (!watchIntervalTimer) { // If it's not set.
watchIntervalTimer = setInterval(updateTimer, 10);
countingSince = Date.now();
}
}
function stopHandler() {
clearInterval(watchIntervalTimer);
watchIntervalTimer = null; // So we can identify that it's reset.
}
Start.addEventListener('click', startHandler);
Stop.addEventListener('click', stopHandler);
var seconds;
var milliseconds;
var d;
let timePassed = 0;
updateLabel();
function updateTimer() {
timePassed += Date.now() - countingSince;
countingSince = Date.now();
updateLabel();
}
function updateLabel() {
d = new Date(timePassed);
seconds = d.getSeconds();
milliseconds = Math.floor((d.getMilliseconds() / 10));
if (milliseconds < 10 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ":0" + milliseconds;
} else if (milliseconds < 10 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ":0" + milliseconds;
} else if (milliseconds >= 0 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ":" + milliseconds;
} else if (milliseconds >= 0 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ":" + milliseconds;
}
}
#Time {
background-color: yellow;
max-width: 5%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>