xiaohelikesleep · blog

Appearance

Web实现猜数字游戏：JavaScript DOM基础与实例教程 ​

创建HTML结构 ​

首先，我们需要创建一个包含游戏输入区域、结果显示和再玩一次按钮的HTML结构。

html
<div class="container">
  <h1>猜数字游戏</h1>
  <div class="input-group">
    <label for="guess">请猜一个1~100的整数：</label>
    <input type="text" id="guess" />
    <button id="submit">提交</button>
  </div>
  <div class="result"></div>
  <div class="message"></div>
  <button id="play-again" class="play-again" style="display: none">再玩一次</button>
</div>

美化样式 ​

css
* {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }

编写JavaScript逻辑 ​

初始化游戏 ​

在JavaScript中，我们首先定义一个变量来存储随机生成的答案。

javascript
var answer = Math.floor(Math.random() * 100) + 1;

获取页面元素 ​

使用document.getElementById和document.querySelector来获取页面上的元素。

javascript
var input = document.getElementById("guess");
var submitBtn = document.getElementById("submit");
var result = document.querySelector(".result");
var message = document.querySelector(".message");
var playAgainBtn = document.getElementById("play-again");

处理提交事件 ​

为提交按钮绑定点击事件，获取用户输入的数字，并与答案比较。

javascript
submitBtn.addEventListener("click", function () {
  var guess = parseInt(input.value);
  if (isNaN(guess) || guess < 1 || guess > 100) {
    result.textContent = "";
    message.textContent = "请输入1~100之间的整数！";
  } else {
    if (guess === answer) {
      result.textContent = "恭喜你，猜对了！";
      message.textContent = "";
      playAgainBtn.style.display = "block";
      submitBtn.disabled = true;
    } else {
      result.textContent = "";
      if (guess < answer) {
        message.textContent = "太小了，请继续猜！";
      } else {
        message.textContent = "太大了，请继续猜！";
      }
    }
  }
});

处理再玩一次事件 ​

为再玩一次按钮绑定点击事件，重置游戏状态并允许用户重新开始游戏。

javascript
playAgainBtn.addEventListener("click", function () {
  answer = Math.floor(Math.random() * 100) + 1;
  input.value = "";
  result.textContent = "";
  message.textContent = "";
  playAgainBtn.style.display = "none";
  submitBtn.disabled = false;
});

全部代码 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白😁猜数字</title>
    <style>
      * {
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .container {
        margin: 50px auto;
        max-width: 600px;
        text-align: center;
        background-color: #d1d1d1;
        padding: 30px;
        border-radius: 10px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 20px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"] {
        font-size: 18px;
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
      }

      button {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #0062cc;
      }

      .result {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .message {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .play-again {
        font-size: 18px;
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        margin: 0 auto;
      }

      .play-again:hover {
        background-color: #0062cc;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>猜数字游戏</h1>
      <div class="input-group">
        <label for="guess">请猜一个1~100的整数：</label>
        <input type="text" id="guess" />
        <button id="submit">提交</button>
      </div>
      <div class="result"></div>
      <div class="message"></div>
      <button id="play-again" class="play-again" style="display: none">
        再玩一次
      </button>
    </div>

    <script>
      // 生成随机数（1~100之间）
      var answer = Math.floor(Math.random() * 100) + 1;

      // 获取页面元素
      var input = document.getElementById("guess");
      var submitBtn = document.getElementById("submit");
      var result = document.querySelector(".result");
      var message = document.querySelector(".message");
      var playAgainBtn = document.getElementById("play-again");

      // 处理提交事件
      submitBtn.addEventListener("click", function () {
        // 获取用户输入的数字
        var guess = parseInt(input.value);

        // 验证用户输入的数字是否合法
        if (isNaN(guess) || guess < 1 || guess > 100) {
          result.textContent = "";
          message.textContent = "请输入1~100之间的整数！";
          return;
        }

        // 比较用户输入的数字和答案
        if (guess === answer) {
          result.textContent = "恭喜你，猜对了！";
          message.textContent = "";
          playAgainBtn.style.display = "block";
          submitBtn.disabled = true;
        } else if (guess < answer) {
          result.textContent = "";
          message.textContent = "太小了，请继续猜！";
        } else {
          result.textContent = "";
          message.textContent = "太大了，请继续猜！";
        }
      });

      // 处理再玩一次事件
      playAgainBtn.addEventListener("click", function () {
        // 重新生成随机数
        answer = Math.floor(Math.random() * 100) + 1;

        // 清空输入框和提示信息
        input.value = "";
        result.textContent = "";
        message.textContent = "";

        // 隐藏再玩一次按钮，启用提交按钮
        playAgainBtn.style.display = "none";
        submitBtn.disabled = false;
      });
    </script>
  </body>
</html>