如何使用 Javascript 切换按钮答案

【问题标题】：How to toggle a button with Javascript如何使用 Javascript 切换按钮
【发布时间】：2022-11-18 02:45:01
【问题描述】：

我想使用 HTML、CSS 和 vanilla JavaScript 创建一个类似手机的秒表。我已经完成的那个完成了任务，但我不想要一个单独的按钮来停止和启动。我怎样才能制作一个从开始到停止再从停止到开始的按钮？

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <h1>Stopwatch</h1>
    <h2>Vanilla JavaScript Stopwatch</h2>
    <p><span id="seconds">00</span>:<span id="tens">00</span></p>
    <button id="button-start">Start</button>
    <button id="button-stop">Stop</button>
    <button id="button-reset">Reset</button>
  </div>
</body>
</html>

这是我的 JavaScript 代码：

window.onload = function () {
  
  var seconds = 00; 
  var tens = 00; 
  var appendTens = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonStart = document.getElementById('button-start');
  var buttonStop = document.getElementById('button-stop');
  var buttonReset = document.getElementById('button-reset');
  var Interval ;

  buttonStart.onclick = function() {
    
    clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
  }
  
    buttonStop.onclick = function() {
       clearInterval(Interval);
  }
  

  buttonReset.onclick = function() {
     clearInterval(Interval);
    tens = "00";
    seconds = "00";
    appendTens.innerHTML = tens;
    appendSeconds.innerHTML = seconds;
  }
  
   
  
  function startTimer () {
    tens++; 
    
    if(tens <= 9){
      appendTens.innerHTML = "0" + tens;
    }
    
    if (tens > 9){
      appendTens.innerHTML = tens;
      
    } 
    
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }
    
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
  
  }
  

}

【问题讨论】：

您可以存储一个布尔值，告诉您秒表是否启动，我们称它为isStarted（默认为 false）。如果布尔值为 false 并且单击了按钮，则将按钮的文本更改为“停止”，将布尔值更改为 true 并启动秒表。如果布尔值为真，则反之。

标签： javascript html css

【解决方案1】：

定义一个布尔值来跟踪时钟是否在运行，并将启动和停止功能合并为一个：如下所示：

var clockStarted = false;

buttonStart.onclick = function() {
  clearInterval(Interval);
  if (!clockStarted) {
     Interval = setInterval(startTimer, 10);
     clockStarted = true;
  } else {
     clockStarted = false;
  }
}


buttonReset.onclick = function() {
  clearInterval(Interval);
  tens = "00";
  seconds = "00";
  appendTens.innerHTML = tens;
  appendSeconds.innerHTML = seconds;
  clockStarted = false;
}

【讨论】：

【解决方案2】：

你可以在点击它后让你的播放按钮不可见（buttonStart.style.dispaly =“none”）并启用你的停止按钮（buttonStop.style.dispaly =“block”）并在你的停止功能中反向执行相同的操作.

另一种可能的方法是只使用一个按钮并将播放器的状态保存在一个变量中（即布尔值 isPlaying）。然后你只需要一个 onPress 方法来根据 isPlaying 启动或停止播放器。您还需要根据此变量更改按钮上的元素或图标。

【讨论】：