單擊停止按鈕時以紅色顯示記錄文本

Question

我有一個關於 html、css、javascript 的問題。

我制作了一個游戲，其中必須按順序按下數字。

當我在游戲中間點擊停止按鈕時，我必須用紅色顯示記錄時間。 像這樣...在此處輸入圖片描述

我也有提示。

1. 使用代碼

newP.className = "stopped";

2. CSS 選擇器由 class 名稱
3. 創建 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 function 的變化。 如果stop function 有一個參數，顏色將是紅色。 當用戶按下停止按鈕時，html 將按下動作作為參數發送。 但是當游戲完成時，function 被無參數調用。 因此，當用戶中斷游戲時，您可以將分數顯示為紅色，而當用戶完成游戲時，您可以將分數顯示為黑色。

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>