首页html猜数字小游戏代码

html猜数字小游戏代码

时间: 2024-06-15 12:02:12 浏览: 78

HTML和JavaScript可以结合创建一个简单的猜数字小游戏。这里是一个基本的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>猜数字游戏</title> <style> #guess { font-size: 24px; margin-bottom: 10px; } </style> </head> <body> <h2>猜数字游戏</h2> <p>我想了一个1到100之间的数字，请你猜一猜：</p> <input type="number" id="guessInput" placeholder="请输入你的猜测"> <button onclick="checkGuess()">猜测</button> <p id="message"></p> <script> const numberToGuess = Math.floor(Math.random() * 100) + 1; // 生成1到100的随机数 function checkGuess() { const guess = parseInt(document.getElementById('guessInput').value); let message = document.getElementById('message'); if (isNaN(guess)) { message.textContent = "请输入一个数字！"; } else if (guess < numberToGuess) { message.textContent = "你猜的数字太小了！"; } else if (guess > numberToGuess) { message.textContent = "你猜的数字太大了！"; } else { message.textContent = "恭喜你，猜对了！"; resetGame(); // 清空游戏状态 } } function resetGame() { document.getElementById('guessInput').value = ''; message.textContent = ""; } </script> </body> </html> ``` 在这个例子中，用户在输入框里输入猜测的数字，点击“猜测”按钮后，JavaScript会检查用户的输入并给出相应的提示。如果猜对了，会显示恭喜信息并重置游戏。

阅读全文