单击停止按钮时以红色显示记录文本

Question

我有一个关于 html、css、javascript 的问题。

我制作了一个必须按顺序按数字的游戏。

当我在游戏中间点击停止按钮时，我必须用红色显示记录时间。 像这样... enter image description here

我也有提示。

1. 使用代码

newP.className = "stopped";

1. 按类名的 CSS 选择器
2. 创建 div(division)：游戏成功，游戏停止

这是我的完整代码。

var answer = 0;

function start() {
  startTime = new Date().getTime();
  toggleButton = document.getElementById("toggle_button");
  toggleButton.innerHTML = "Stop";
  toggleButton.onclick = stop;

  init();

  timer = setInterval(function() {
    now = new Date().getTime();
    seconds = now - startTime;
    document.getElementById("time").innerHTML = displayTime(seconds);
  }, 60);
}

function stop() {
  clearInterval(timer);
  toggleButton = document.getElementById("toggle_button");
  toggleButton.innerHTML = "Start";
  toggleButton.onclick = start;
}

function btnClick(num) {
  btns = document.getElementsByClassName("btn");
  if (num == answer) { 
    answer = answer+1;
    btns[num].disabled = true;
    if (num == 8) { 
      stop();
      score = document.getElementById("time").innerHTML;
      newP = document.createElement("p");
      newP.appendChild(document.createTextNode(score));
      document.getElementById("score_board").appendChild(newP);
    }
  } else { 
    init();
  }
}

function init() {
  answer = 0;

  btns = document.getElementsByClassName("btn");
  for (let index=0; index<btns.length; index++) {
    btns[index].disabled = false;
    btns[index].innerHTML = index;
  }
}

function displayTime (seconds) {
  m = String(Math.floor(seconds / 1000 / 60));
  s = String(Math.floor((seconds / 1000) % 60));
  ms = String(Math.floor(seconds % 100));
  return m.padStart(2, '0') + ":" + s.padStart(2, '0') + ":" + ms.padStart(2, '0');
};

.btn {
  width:60px;
  height:60px;
  font-size:18px;
  margin:2px;
} /*select by class */

#toggle_button {
  width:120px;
  background-color:#000;
  color:#fff;
  height:24px;
  border:none;
}

#time {
  font-size:20px;
  font-weight:bold;
} /*select by id */

img {
  width:100px;
} /*select by html elemnt */

<center>
  <p id="time">00:00:00</p>
  <button id="toggle_button" onclick="start()">Start</button>
  <br /><br />

  <button id="button_1" class="btn" onclick="btnClick(0)" disabled>?</button>
  <button id="button_2" class="btn" onclick="btnClick(1)" disabled>?</button>
  <button id="button_3" class="btn" onclick="btnClick(2)" disabled>?</button><br />
  <button id="button_4" class="btn" onclick="btnClick(3)" disabled>?</button>
  <button id="button_5" class="btn" onclick="btnClick(4)" disabled>?</button>
  <button id="button_6" class="btn" onclick="btnClick(5)" disabled>?</button><br />
  <button id="button_7" class="btn" onclick="btnClick(6)" disabled>?</button>
  <button id="button_8" class="btn" onclick="btnClick(7)" disabled>?</button>
  <button id="button_9" class="btn" onclick="btnClick(8)" disabled>?</button>

  <div id="score_board">
    <p><strong>Score Board</strong><p>
  </div>
</center>

抱歉英语不好，因为我不是母语人士。 非常感谢...！

Answer 1

以下代码是stop 函数的变化。如果stop 函数有参数，则颜色将为红色。当用户按下停止按钮时，html 将按下动作作为参数发送。但是当游戏完成时，该函数被调用而没有参数。因此，当用户打破游戏时，您可以将分数显示为红色，当用户完成游戏时，您可以将分数显示为黑色。

const scoreBoard = document.querySelector('#score_board');
const score = document.getElementById("time").innerHTML;
const scoreEl = document.createElement('p');
if(c) scoreEl.style.color = 'red';
const node = document.createTextNode(score);
scoreEl.appendChild(node);
scoreBoard.appendChild(scoreEl);

示例如下：

var answer = 0;

function start() {
  startTime = new Date().getTime();
  toggleButton = document.getElementById("toggle_button");
  toggleButton.innerHTML = "Stop";
  toggleButton.onclick = stop;

  init();

  timer = setInterval(function() {
    now = new Date().getTime();
    seconds = now - startTime;
    document.getElementById("time").innerHTML = displayTime(seconds);
  }, 60);
}

function stop(c) {
  clearInterval(timer);
  const scoreBoard = document.querySelector('#score_board');
  const score = document.getElementById("time").innerHTML;
  const scoreEl = document.createElement('p');
  if(c) scoreEl.style.color = 'red';
  const node = document.createTextNode(score);
  scoreEl.appendChild(node);
  scoreBoard.appendChild(scoreEl);
  toggleButton = document.getElementById("toggle_button");
  toggleButton.innerHTML = "Start";
  toggleButton.onclick = start;
}

function btnClick(num) {
  btns = document.getElementsByClassName("btn");
  if (num == answer) { 
    answer = answer+1;
    btns[num].disabled = true;
    if (num == 8) { 
      stop();
    }
  } else { 
    init();
  }
}

function init() {
  answer = 0;

  btns = document.getElementsByClassName("btn");
  for (let index=0; index<btns.length; index++) {
    btns[index].disabled = false;
    btns[index].innerHTML = index;
  }
}

function displayTime (seconds) {
  m = String(Math.floor(seconds / 1000 / 60));
  s = String(Math.floor((seconds / 1000) % 60));
  ms = String(Math.floor(seconds % 100));
  return m.padStart(2, '0') + ":" + s.padStart(2, '0') + ":" + ms.padStart(2, '0');
};

.btn {
  width:60px;
  height:60px;
  font-size:18px;
  margin:2px;
} /*select by class */

#toggle_button {
  width:120px;
  background-color:#000;
  color:#fff;
  height:24px;
  border:none;
}

#time {
  font-size:20px;
  font-weight:bold;
} /*select by id */

img {
  width:100px;
} /*select by html elemnt */

<center>
  <p id="time">00:00:00</p>
  <button id="toggle_button" onclick="start()">Start</button>
  <br /><br />

  <button id="button_1" class="btn" onclick="btnClick(0)" disabled>?</button>
  <button id="button_2" class="btn" onclick="btnClick(1)" disabled>?</button>
  <button id="button_3" class="btn" onclick="btnClick(2)" disabled>?</button><br />
  <button id="button_4" class="btn" onclick="btnClick(3)" disabled>?</button>
  <button id="button_5" class="btn" onclick="btnClick(4)" disabled>?</button>
  <button id="button_6" class="btn" onclick="btnClick(5)" disabled>?</button><br />
  <button id="button_7" class="btn" onclick="btnClick(6)" disabled>?</button>
  <button id="button_8" class="btn" onclick="btnClick(7)" disabled>?</button>
  <button id="button_9" class="btn" onclick="btnClick(8)" disabled>?</button>

  <div id="score_board">
    <p><strong>Score Board</strong><p>
  </div>
</center>