Question

我需要一个按钮，该按钮自单击以来将每秒显示和更新时间。如果再次单击它，应该什么也不显示。我尝试了很多（开关等），但是我解决不了。如果我单击按钮，它会显示时间并进行更新，但是如果再次单击它，则会清空该段落的innerHTML，但是一秒钟后，时间会再次弹出并进行更新。有人可以告诉我为什么我的clearInterval不能正常工作，我该如何解决？

var abc = false;

function switched() {
 let x = document.getElementById("switch");

 if (!abc) { 
  var myFun = setInterval(Time, 1000);
  abc = true;
  return;
 }

 if (abc) {
  clearInterval(myFun);
  abc = false;
  x.innerHTML = "";
  return;
 }

 function Time() {
  var date1 = new Date();
  var t = date1.toLocaleTimeString();
  x.innerHTML = t;
 }
}

<p>On switch which shows you're current time:</p>
<button onclick="switched()">On</button>
<p id="switch"></p>

Answer 1

声明全局保留间隔的变量。
还有按钮和段落。
代替按钮abc，使用按钮的textContent的值。
立即调用“时间”立即显示时间，然后每1000ms一次。
更有意义地命名变量和ID。
避免将变量声明为一次性使用。
向用户清楚地说明正在发生什么以及可能的操作和结果。
使用onclick很好。我刚刚开始使用let而不是var，我想我实际上应该使用const（我没有进行调试），而且我最近也开始使用textContent而不是innerText =我也在学习！
（轻微的语法错误：“是您的”，而不是“您是”）

附录：好的，let是interval的原因，因为它是稍后（并且很可能是多次）分配的值，而const是button和{ {1}}，因为它们将始终“指向”同一事物，并且只有“事物”的属性会发生变化...

paragraph

let interval;
const button = document.getElementById("switchButton");
const paragraph = document.getElementById("timeParagraph");

function toggleSwitch() {
  if(button.textContent == "On") {
    button.textContent = "Off";
    Time();
    interval = setInterval(Time, 1000);
  }
  else {
    button.textContent = "On";
    clearInterval(interval);
    paragraph.textContent = "";
  }
}

function Time() {
  paragraph.textContent = new Date().toLocaleTimeString();
}

我的开关没有熄灭，我也不知道该如何解决

1 个答案: