用js加jQuery写一个猜数字游戏

最新推荐文章于 2025-04-02 17:23:52 发布

奋进的小暄

最新推荐文章于 2025-04-02 17:23:52 发布

阅读量393

点赞数 18

文章标签： javascript jquery 游戏

本文链接：https://blog.youkuaiyun.com/2301_81564787/article/details/145810882

版权

写这个关键在于jQuery依赖的导入。

可以在jQuery官网把精简版的cdn核心保存到本地添加到项目路径中。

引用用 <script src="jquery-3.7.1.min.js"></script>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="reset">重新开始一局游戏</button><br/>
    <span>请输入你要猜的数字：</span>
    <input type="text" id="guessNum">
    <button id="guess"> 猜</button><br/>
    <span>已经猜的次数：</span><span id="count">0</span></br>
    <span>结果：</span><span id="result"></span>



    <script src="jquery-3.7.1.min.js"></script>
    <script>
        let count =0;
        let number =Math.floor(Math.random()*100) +1;
        console.log(number);
        $("#guess").click(function(){
            count++;
            let guessNum =$("#guessNum").val();
        
            $("#count").text(count);

            if(number<guessNum){

                $("#result").text("猜大了");
                $("#result").css("color","red");
            }else if(number>guessNum){
                $("#result").text("猜小了");
                $("#result").css("color","red");
            }else{
                $("#result").text("猜对了");
                $("#result").css("color","green");
            }
        });
        $("#reset").click(function(){
         number =Math.floor(Math.random()*100) +1;
        console.log(number);
        count =0;
        $("#result").text("");
        $("#count").text(count);
        $("#guessNum").val("");
        });
        

    </script>
</body>
</html>