您的位置 首页 代码相关

HTML猜数字小游戏源码分享

废话不多说了喵,上源码

  1. <html>
  2. <head>
  3. <title>AnJProject-猜数字游戏</title>
  4. <meta charset="UTF-8">
  5. <style>
  6. body {
  7. font-family: Arial, sans-serif;
  8. text-align: center;
  9. }
  10. h1 {
  11. margin-top: 50px;
  12. }
  13. input {
  14. padding: 10px;
  15. font-size: 20px;
  16. margin-top: 20px;
  17. }
  18. button {
  19. padding: 10px 20px;
  20. font-size: 20px;
  21. margin-top: 20px;
  22. background-color: #4CAF50;
  23. color: white;
  24. border: none;
  25. border-radius: 5px;
  26. cursor: pointer;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <h1>猜数字游戏</h1>
  32. <p>在1到100之间猜一个数字</p>
  33. <input type="text" id="guess" pattern="[0-9]+" required onkeydown="if(event.keyCode == 13) checkGuess()">
  34. <button onclick="checkGuess()">猜!</button>
  35. <p id="result"></p>
  36. <script>
  37. var answer = Math.floor(Math.random() * 100) + 1; // 生成1到100之间的随机数
  38. var attempts = 0;
  39. function checkGuess() {
  40. var guess = parseInt(document.getElementById("guess").value);
  41. if (guess == answer) {
  42. document.getElementById("result").innerHTML = "恭喜你,猜对了!你用了" + attempts + "次猜中了答案!";
  43. } else if (guess < answer) {
  44. document.getElementById("result").innerHTML = "你猜的数字太小了,请再试一次。";
  45. attempts++;
  46. } else if (guess > answer) {
  47. document.getElementById("result").innerHTML = "你猜的数字太大了,请再试一次。";
  48. attempts++;
  49. }
  50. }
  51. </script>
  52. <footer>
  53. <p>&copy; 2023 AnJProject. All rights reserved.</p>
  54. </footer>
  55. </body>
  56. </html>
1.本文来自网络,不代表优比客立场,转载请注明出处:https://siwakongjie.com/daimaxiangguan/1.html

2.未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,不得用于违反国家法律,否则发生的一切法律后果自行承担!

联系我们

联系我们

微信9953517

在线咨询: QQ交谈

邮箱: njknjknjk@126.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部