当前位置：首页 > JavaScript

js实现猜大小

2026-03-15 14:21:18JavaScript

实现思路

使用JavaScript实现猜大小游戏，核心逻辑包括生成随机数、比较用户输入与目标数字、反馈结果。游戏流程分为初始化、用户交互和结果判断三部分。

生成随机数

利用Math.random()生成1-100的随机整数作为目标数字：

const targetNumber = Math.floor(Math.random() * 100) + 1;

获取用户输入

通过HTML输入框获取用户猜测值，并转换为数字类型：

js实现猜大小

const userGuess = parseInt(document.getElementById('guessInput').value);

比较逻辑

实现三种结果判断：

if (userGuess === targetNumber) {
    alert('猜对了！');
} else if (userGuess > targetNumber) {
    alert('太大了！');
} else {
    alert('太小了！');
}

完整代码示例

HTML部分：

js实现猜大小

<input type="number" id="guessInput" placeholder="输入1-100的数字">
<button onclick="checkGuess()">提交</button>
<p id="result"></p>

JavaScript部分：

let targetNumber = Math.floor(Math.random() * 100) + 1;

function checkGuess() {
    const userGuess = parseInt(document.getElementById('guessInput').value);
    const resultElement = document.getElementById('result');

    if (isNaN(userGuess)) {
        resultElement.textContent = '请输入有效数字';
        return;
    }

    if (userGuess === targetNumber) {
        resultElement.textContent = '恭喜！猜对了！';
    } else if (userGuess > targetNumber) {
        resultElement.textContent = '太大了！';
    } else {
        resultElement.textContent = '太小了！';
    }
}

功能扩展建议

添加尝试次数计数：

let attempts = 0;
function checkGuess() {
    attempts++;
    // ...原有逻辑...
    resultElement.textContent += ` 已尝试${attempts}次`;
}

增加重新开始按钮：

function resetGame() {
    targetNumber = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    document.getElementById('result').textContent = '';
}