前端程序——猜数字游戏

Xiao8830

已于 2022-11-07 10:35:41 修改

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： css html javascript

于 2022-11-06 09:05:18 首次发布

本文链接：https://blog.csdn.net/m0_60867520/article/details/127712234

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目样式

在这里插入图片描述

项目说明

通过在输入框中输入数字，并且按“猜”的按钮，可以进行猜的动作
在结果中显示猜的是大是小
通过开始新的一局按钮，重新开始游戏

代码

<!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 class = 'reset'>开始新的一局</button>
    <div>请输入你猜的数字：
        <input type="text" class="number">
        <button class="guess">猜！</button>
    </div>
    <div> 猜的次数： <span class="count">0</span> </div>
    <div>结果：<span class="result"></span></div>

    <script>
        let number = document.querySelector('.number');
        let count = document.querySelector('.count');
        let result = document.querySelector('.result');
        let reset = document.querySelector('.reset');
        let guess = document.querySelector('.guess');

        let numberToGuess = parseInt(Math.random() * 100 + 1);
        console.log(numberToGuess);
        let tmp = 0;
        guess.onclick = function(){
            tmp++;
            count.innerText = tmp;
            console.log(tmp);

            let userGuessNumber = parseInt(number.value);
            if(userGuessNumber == numberToGuess){
                result.innerHTML = 'bingo！';
                result.style = 'color: orange';
            } else if (userGuessNumber < numberToGuess){
                result.innerHTML = '猜小了！';
                result.style = 'color: green';
            } else {
                result.innerHTML = '猜大了！';
                result.style = 'color: red';
            }
        };

        reset.onclick = function(){
            numberToGuess = parseInt(Math.random() * 100 + 1);
            tmp = 0;
            count.innerText = tmp;
            result.innerText = "";
            number.value = "";
        }
    </script>
</body>
</html>