【创建一个网页，实现猜数字游戏】

news2025/2/27 14:22:25

要求如下
在这里插入图片描述

逻辑如下：

一个button按钮
第二行中，打印“请…数字”
然后一个输入文本框
然后一个按钮
第三行打印 “已经猜的次数”
然后打印猜的次数
结果显示猜大了猜小了猜对了

在script中

获取button按钮、输入的数据、记录count的值，以及结果值
随机生成一个随机数Math.floor 、 count变量值记录
如果点猜按钮，所有数据进行变动
如果点重启，所有数据初始化

<!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>Document</title>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button>
    <br>
    请输入要猜的数字：<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数：<span id="count">0</span>
    <br>
    结果：<span id="result"></span>
    <script>
        var inputE = document.querySelector("#number");
     var countE = document.querySelector("#count");
    var resultE = document.querySelector("#result");
    var btn = document.querySelector("#button");
    var resetBtn = document.querySelector("#reset");
    // 随机生成一个 1-100 的数字
    var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
    var count = 0;
    // on: 当
    // click: 点击
    // 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数
    btn.onclick = function() {
        count++;
        countE.innerText = count;
        var userGuess = parseInt(inputE.value);
        if (userGuess == guessNumber) {
            resultE.innerText = "猜对了";
            resultE.style = "color: gray;";
       } else if (userGuess < guessNumber) {
            resultE.innerText = "猜小了";
            resultE.style = "color: blue;";
       } else {
            resultE.innerText = "猜大了";
            resultE.style = "color: red;";
       }
   };
    resetBtn.onclick = function() {
        guessNumber = Math.floor(Math.random() * 100) + 1
        count = 0;
        countE.innerText = count;
        resultE.innerText = "";
        inputE.value = "";
   }
</script>
</body>
</html>