Question

var myVar = setInterval(myTimer, 1000);

var button = document.querySelector(".button");

function myVarFunction() {
	setInterval(myTimer, 1000);
}

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function clockButton(document.querySelector(".button").toggle(".clockOn")){
	if(button.hasAttribute("class","clockOn")){
		clearInterval(myVar);
		}else{
	myVarFunction();
	}
}

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

<button onclick="clockButton()" class = "button clockOn" >button</button>

</body>
</html>

我正在尝试执行一个代码片段，该片段将实时显示时间（使用setInterval()方法），一个button会在单击时停止实时运行时间，但是如果再次单击，则时间将像以前一样实时运行（使用.toggle()来实现）。

这是w3schools练习的链接，我从这里得到了这个想法： https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_clearinterval

由于某种原因，时间完全消失了，我的代码都不起作用，我也弄不清为什么

Answer 1

您可以在下面检查我的实现，时间从切换后的当前实时时间开始，我想这就是您想要的。

let time = document.getElementById("demo")
let myIntervalTimer;

function myStartFunction() {
 if(myIntervalTimer){
  clearInterval(myIntervalTimer)
 }
 myIntervalTimer = setInterval(myTimer, 1000)
}

function myStopFunction() {
 clearInterval(myIntervalTimer)
}

function myTimer() {
  let d = new Date();
  let t = d.toLocaleTimeString();
  time.innerHTML = t;
}

let timeClassList = time.classList
function toggleTime() {
if(timeClassList.contains('showTime')) {
 myStopFunction()
}
else {
  myStartFunction()
}
timeClassList.toggle("showTime")
}
myStartFunction()

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo" class='showTime'></p>

<button onclick="toggleTime()">Toggle time</button>

</body>
</html>

Answer 2

如果只想回答，请跳到最后

首先，从HTML中删除onClick事件，并将其放入脚本中。这是设置事件的推荐方法。

<button class="button clockOn">button</button>

和

var myVar = setInterval(myTimer, 1000);

var button = document.querySelector(".button");

// Add the event listener here
button.addEventListener("click", clockButton);

现在有几个问题，但是您最突出的问题是clockButton函数。这里得到的是无效的JavaScript，您无法在函数的参数列表内执行代码：

function clockButton(document.querySelector(".button").toggle(".clockOn")){
  ...
}

您需要将此代码移至函数主体。

function clockButton () {
  document.querySelector(".button").toggle(".clockOn");
  ...
}

这解决了第一个问题，那就是无效的代码。但是，您要面对的下一个问题是toggle(...)并不是按钮元素的功能，（您可能在这里混淆了jQuery，这在我身上已经发生了很多次了。）。无论如何，您实际上实际上并不需要这行代码，因此您可以删除它，并编写自己的类切换。

编写类切换非常简单，实际上您已经在if语句中检查了按钮类，因此编写类切换自然是显而易见的地方：

if(button.hasAttribute("class","clockOn")){
  ...
}

但是不幸的是，上面的代码有问题。在元素上调用hasAttribute函数只会检查该属性是否存在，而不是实际上是否具有特定值。因此，在您的情况下，它永远都是正确的，因为您永远不会删除class属性，而只是将其更改为其他内容。

要解决此问题，您可以使用classList功能，这是当今处理本地DOM API中的元素类的标准。您要检查元素是否具有类clockOn，以便可以将if语句更改为此：

if (button.classList.contains("clockOn")) {
  ...
}

要删除该类，可以像下面这样在类列表上使用remove函数：

button.classList.remove("clockOn");

您可以使用

重新添加该类

button.classList.add("clockOn");

总而言之，您的功能就是这样

function clockButton(){
    if(button.classList.has("clockOn"){
        clearInterval(myVar);
        button.classList.remove("clockOn");
    }
    else {
        myVarFunction();
        button.classList.add("clockOn");
    }
}

现在您在这里，您的按钮应该可以停止时钟，并在第二次单击时重新启动它，但是它尚不能正常工作，因为您会注意到如果再次单击它，时间不会停止。

这是因为myVarFunction并未将新的间隔句柄重新分配给myVar变量。每次调用setInterval时，都应该获得一个新的句柄。例如，假设您第一次调用setInterval会分配123的句柄。

var myVar = setInterval(myTimer, 1000);
// myVar === 123

现在clearInterval(myVar)将清除运行间隔。

下次设置间隔时，该间隔在myVarFunction之内，例如，它在下次调用时返回456。

function myVarFunction() {
   // setInterval returns `456`
   setInterval(myTimer, 1000);

   // myVar is still equal to `123`
}

下次尝试清除间隔时，将清除不存在的123（因为从未重新分配myVar变量），因此应清除456是您刚刚设置的新间隔。

所以这很容易解决

function myVarFunction() {
  myVar = setInterval(myTimer, 1000);
}

TL; DR 您的代码应该看起来像这样

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

<!-- Remove the onclick event from here -->
<button class="button clockOn" >button</button>

</body>
</html>

var myVar = setInterval(myTimer, 1000);

var button = document.querySelector(".button");

button.addEventListener('click', clockButton);

function myVarFunction() {
    myVar = setInterval(myTimer, 1000);
}

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function clockButton(){
    if(button.classList.contains("clockOn")){
        clearInterval(myVar);
        button.classList.remove("clockOn");
    }
    else {
        myVarFunction();
        button.classList.add("clockOn");
    }
}

实时观看

JSFiddle

难以完成此基于时间的代码段

2 个答案: