当前位置：首页 > JavaScript

js实现猜大小

2026-02-02 14:09:04JavaScript

实现思路

通过生成随机数作为目标值，用户输入猜测数字后与目标值比较，返回提示信息（太大、太小或正确）。需包含输入验证和重新开始功能。

js实现猜大小

核心代码

// 生成1-100的随机整数作为答案
const target = Math.floor(Math.random() * 100) + 1;
let attempts = 0;

function checkGuess() {
    const guessInput = document.getElementById('guessInput');
    const message = document.getElementById('message');
    const guess = parseInt(guessInput.value);

    // 输入验证
    if (isNaN(guess) || guess < 1 || guess > 100) {
        message.textContent = '请输入1-100的有效数字';
        return;
    }

    attempts++;

    // 比较逻辑
    if (guess > target) {
        message.textContent = '太大了！';
    } else if (guess < target) {
        message.textContent = '太小了！';
    } else {
        message.textContent = `恭喜！用了${attempts}次猜中`;
        disableInput();
    }
}

function disableInput() {
    document.getElementById('guessInput').disabled = true;
    document.getElementById('submitBtn').disabled = true;
}

HTML结构

<div class="game-container">
    <h3>猜数字游戏 (1-100)</h3>
    <input type="number" id="guessInput" min="1" max="100">
    <button id="submitBtn" onclick="checkGuess()">提交</button>
    <p id="message"></p>
    <button id="resetBtn" onclick="resetGame()">重新开始</button>
</div>

重置功能

function resetGame() {
    target = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    document.getElementById('guessInput').value = '';
    document.getElementById('message').textContent = '';
    document.getElementById('guessInput').disabled = false;
    document.getElementById('submitBtn').disabled = false;
}

样式建议

.game-container {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
input, button {
    margin: 10px 0;
    padding: 8px;
}
#message {
    min-height: 20px;
    color: #666;
}