使用jQuery写出猜数字游戏

最新推荐文章于 2024-10-11 19:03:40 发布

H_e_a_l_e_r

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量2.8k

点赞数 1

分类专栏： JS语言文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/H_e_a_l_e_r/article/details/121843488

版权

JS语言专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h1{
            color: red;
        }
        p{
            color: blue;
        }
        #s{
            border: 1px solid black;
            width: 300px;
            height: 30px;
            display: inline-block;
            background-color: white;
            line-height: 30px;
        }
        #c{
            width: 50px;
        }
        #back{
            width: 800px;
            height: 534px;
            position: absolute;
        }
        #y{
            margin-left: 100px;
            margin-top: 20px;
            line-height: 50px;
        }
        video{
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            height: 500px;
            width: 500px;
            z-index:-11
        }
    </style>
    <script src="../JS/jquery-1.12.4.js"></script>
</head>
<body>
    <div id="back">
        <video autoplay loop muted>
            <source src="../img/龙猫.mp4" type="video/mp4"  />
        </video>
        <div id="y">
            <h1>猜数字</h1>
            <p>这个数在100以内，你只有10次机会</p>
            <span id="s">请输入数字</span>
            猜吧：<input type="text" id="c">
            <button>确定</button>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        var number = Math.floor(Math.random()*100)+1;
        var s = "";
        $("button").click(function () {
            var text = Number($("#c").val());
            if (isNaN(text)){
                $("#s").html("你输入的不是数字")
            }else{
                if (text > 100 || text<1){
                    $("#s").html("输入数字不在范围内，请输入1-100以内")
                }else {
                    if (text < number){
                        s = String(text)+"这个数字太小了";
                        $("#s").html(s);
                    }else{
                        if (text > number){
                            s = String(text)+"这个数字太大了";
                            $("#s").html(s);
                        }
                        else{
                            s = String(text)+"恭喜你猜对了";
                            $("#s").html(s);
                        }
                    }
                }
            }
        })
    })
</script>
</html>