StopBtn不能调用两次
一旦这个函数被调用,它就会保持不变,不起作用,我也得到了一个错误,告诉我定时器不是一个对象。我真的不知道问题出在哪里
var timer = setInterval(clock, 1000);
function clock() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById("time").innerHTML = "The Current time is > " + time;
}
var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");
stopBtn.addEventListener("click", stopTime);
function stopTime() {
var stoptime = clearInterval(timer);
console.log("Stop");
}
startBtn.addEventListener("click", startTime);
function startTime() {
var starttime = setInterval(clock, 1000);
console.log("hello");
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet" />
</head>
<body>
<button id="stop">STOP TIME</button>
<button id="start">START TIME</button>
<h1 id="h1">We are Coding JavaScript</h1>
<h3>Keep On Practicing Dude!</h3>
<div id="time"></div>
<script src="script.js"></script>
</body>
</html>
发布于 2019-05-23 03:14:57
在startTime
函数中,您设置了一个与计时器关联的新变量。stopTime
函数不使用该变量,因此它不会在按下Start按钮后停止计时器。
只需在计时器的整个代码中重复使用一个变量。
备注:
你实际上得到了一个比所需的更复杂的解决方案。不需要启动时钟的clock()
函数和调用clock
函数的startTime
函数,因为它们都需要做同样的事情。
不使用setInterval()
,而使用setTimeout
(这是一个一次性计时器),但将计时器放在start
函数中,以便它成为递归的。
当您要获取/设置的字符串不包含任何超文本标记语言时,不要使用.innerHTML,因为.innerHTML
具有安全性和性能含义。在处理DOM元素字符串时使用.textContent
。
对于要反复使用的元素,只需扫描DOM一次。
var startBtn = document.getElementById("start");
var stopBtn = document.getElementById("stop");
var clock = document.getElementById("currentTime");
startBtn.addEventListener("click", startClock);
stopBtn.addEventListener("click", stopClock);
// This one variable will represent the timer
// throughout the code
var timer = null;
function startClock() {
var now = new Date();
var time = now.toLocaleTimeString();
clock.textContent = "The Current time is > " + time;
timer = setTimeout(startClock, 1000)
}
function stopClock() {
clearTimeout(timer);
console.log("Stop");
}
startClock();
<button id="stop">STOP TIME</button>
<button id="start">START TIME</button>
<div id="currentTime"></div>
https://stackoverflow.com/questions/56263400
复制相似问题