[英]showing record text with red color when click stop button
I have a question regarding html, css, javascript.我有一个关于 html、css、javascript 的问题。
I've made a game in which numbers must be pressed in order.我制作了一个游戏,其中必须按顺序按下数字。
And I have to show the record time with red color when I click the stop button in the middle of the game.当我在游戏中间点击停止按钮时,我必须用红色显示记录时间。 like this... enter image description here
像这样...在此处输入图片描述
Also I've got hints.我也有提示。
newP.className = "stopped";
Here's my full code.这是我的完整代码。
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>
Sorry for bad English since I'm not a native speaker.抱歉英语不好,因为我不是母语人士。 Thank you so much...!
太感谢了...!
Following piece of code is the change in the stop
function.以下代码是
stop
function 的变化。 If stop
function has a parameter the color is gonna be red.如果
stop
function 有一个参数,颜色将是红色。 When user press the stop button, html send press action as a parameter.当用户按下停止按钮时,html 将按下动作作为参数发送。 But when the game is completed the function is called without parameter.
但是当游戏完成时,function 被无参数调用。 Thus you could show score as red when user break the game and black when user complete the game.
因此,当用户中断游戏时,您可以将分数显示为红色,而当用户完成游戏时,您可以将分数显示为黑色。
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);
Here is the example:这是示例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.