实现一个网页版的简易猜数字游戏

曾经终败给现在 2024-05-06 21:24 47阅读 0赞

## 实现一个网页版的简易猜数字游戏 ##

### 效果 ###

![在这里插入图片描述][b256bee0f8e34659a94e5fbfcc67ae8a.png_pic_center]

### 代码截图 ###

![在这里插入图片描述][2bd74ba2d1c34f70ba70dafdeb9e4f02.png_pic_center]

### 相关代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .false {
        
                color: red;
            }
            .true {
        
                color: green;
            }
        </style>
    </head>
    <body>
        <input class="reset_button" type="button" value="重写开始一局游戏" onclick="reSet()"><br>
        请输入的数字：<input class="to_guess_num" type="text"><input type="button" value="猜" onclick="Guess()"><br>
        已经猜的次数：<span class="has_guess_num">0</span><br>
        结果: <span class="result"></span>
    </body>
    <script>
        // 输入的数字
        let to_guess_num_element = document.querySelector('.to_guess_num')
        // console.dir(to_guess_num_element) 
        // 已经猜的次数
        let input_num_element = document.querySelector('.has_guess_num')
        // console.dir(input_num_element)
        // 猜测的结果
        let result_element = document.querySelector('.result')
        // console.dir(result_element)
        function reSet() {
        
            to_guess_num_element.value = ""
            input_num_element.innerHTML = 0
            result_element.innerHTML = ""
        }
        let num  = Math.floor(Math.random() * 100) + 1
        console.log(num)
        function Guess() {
        
            input_num_element.innerHTML = parseInt(input_num_element.innerHTML) + 1
            if(num < parseInt(to_guess_num_element.value)) {
        
                result_element.innerHTML = "猜大了"
                result_element.className = 'false'
            }else if(num > parseInt(to_guess_num_element.value)) {
        
                result_element.innerHTML = "猜小了"
                result_element.className = 'false'
            }else {
        
                result_element.innerHTML = "猜中了"
                result_element.className = 'true'
    
            }
            to_guess_num_element.value = ""
        }
    </script>
    </html>

[b256bee0f8e34659a94e5fbfcc67ae8a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e4143d85446940aca727e69d70958800.png
[2bd74ba2d1c34f70ba70dafdeb9e4f02.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/eea596ecbf9e4fb7be5382d6d581ca0b.png