前端小练习————表白墙+猜数字小游戏

1，猜数字游戏

实现一个这个样式的

要猜的目标数字

点击重新开始游戏之后：

代码实现

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <button type="button" id="reset">重新开始一局游戏</button><br>
    请输入要猜的数字:<input type="text" id="number">
    <button type="button" id="guess">猜</button><br>
    已经猜的次数: <span id="count">0</span><br>
    结果: <span id="result"></span>

    <script>
          $(function(){
            let guessnumber = Math.floor(Math.random()*100)
            let count = 0;
            console.log(guessnumber);

            $("#guess").click(function(){
                count++;
                $("#count").text(count);
                let inputnumber = parseInt($("#number").val());
                if(inputnumber==guessnumber){
                    $("#result").text('猜对了')
                    $("#result").css("color","yellow")
                }else if(inputnumber>guessnumber){
                    $("#result").text('猜大了')
                    $("#result").css("color","red")
                }else{
                    $("#result").text('猜小了')
                    $("#result").css("color","blue")
                }
            })

            $("#reset").click(function(){
                guessnumber = Math.floor(Math.random()*100);
                count = 0;
                $("#number").val("");
                $("#count").text(count);
                $("#result").text("");
            })
          })
    </script>
</body>
</html>

注意要引入jQuery的依赖；

2，表白墙

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <style>
        * {
            padding: 0;
            margin: 0;;
        }
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        p{
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }

        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        span {
            width: 100px;
            line-height: 40px;
        }

        .edit {
            width: 200px;
            height: 30px;
        }

        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>

    <SCript>
        $(function(){
            $(".submit").click(function(){
                let from = $(".edit:eq(0)").val();
                let to = $(".edit:eq(1)").val();
                let message = $(".edit:eq(2)").val();

                var html = '<div class="row">' + from + '对'+ to +'说' + message + '</div>';
                $(".container").append(html);
                $(":text").val("")
            })
        })
    </SCript>
</body>
</html>