©2020-2024 ioDraw All rights reserved
<> If there is something wrong , Welcome to comment
-------------- The code is as follows --------------
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">
<title> Guess the numbers </title> <style> body { padding: 100px 0; background-color: #2b3b49;
color: #fff; text-align: center; font-size: 2.5em; } input { padding: 5px 20px;
height: 50px; background-color: #3b4b59; border: 1px solid #c0c0c0; box-sizing:
border‐box; color: #fff; font-size: 20px; } button { padding: 5px 20px; height:
50px; font-size: 16px; } div { width: 800px; height: 50px; margin: 0 auto; }
</style> <script> // Page loading window.onload = function () { // Define random number function function
getRandom(min, max) { return parseInt((Math.random() * (max - min)) + min); }
// obtain DOM object var num = document.getElementById("num"); var start =
document.getElementById("start"); var show = document.getElementById('show');
var preNum = document.getElementById('preNum'); var restart =
document.getElementById("restart"); // Define game functions function game() { // adopt flag
Record the number of hits var flag = 0; // Create a random number object var ran = getRandom(0, 100); // Button registration click event
start.onclick = function () { // Gets the value entered by the user var val = num.value; // Display prompt box
show.style.display = "block"; // Judge the value entered by the user if (val > 0 && val < 100) { flag +=
1; var showResult = preNum.innerText; preNum.innerText = showResult ?
showResult + "," + val : val; // Judge whether the user has exceeded 10 second if (flag < 11) { //
Judge the number input by the user and the random number generated if (val < ran) { show.innerText = " It's a little smaller ";
show.style.backgroundColor = "red"; } else if (val > ran) { show.innerText =
" It's a little bigger "; show.style.backgroundColor = "red"; } else { show.innerText =
" congratulations ! Right ! You're great "; show.style.backgroundColor = "green"; //
When you're right , The button is not allowed to be clicked , The number box does not allow input , Unless you start all over again this.disabled = "disabled"; num.disabled =
"disabled"; } } else { show.innerText = " Yours 10 The opportunity has run out , Come on next time !";
show.style.backgroundColor = "red"; } } else { show.innerText = " Please enter 0 -
100 Between the numbers "; show.style.backgroundColor = "red"; } } } game(); // Restart the game
restart.onclick = function () { // Allow button click start.removeAttribute("disabled"); //
Allow number box input num.removeAttribute("disabled"); // Hide prompt box show.style.display = "none";
// empty preNum.innerText = ""; // Initializing the number box num.value = ""; // Call again game(); } }
</script> </head> <body> <h1> Number guessing game </h1> <p>Hi, I've got one ready 0 ‐ 100 The number of , You need to be in the only 10
Guess it right within the opportunity .</p> <input type="number" min="0" max="100" name="num"
placeholder=" Guess at random " id="num" /> <button id="start"> have a try </button><br> <p> Guessed numbers :
<span id="preNum"></span></p> <div id="show" style="display:none"></div>
<button id="restart"> restart </button> </body> </html>
Technology