目录

一、猜数字

html代码：

点击 猜 按钮的js代码：

点击 重开游戏 按钮的js代码：

整体代码：

页面效果：

二、留言板

css代码：

html代码：

js代码（主逻辑在这）：

整体代码：

页面效果：

一、猜数字

        页面如下：

        我们想在文本框输入我们想猜的数字，点击猜后下面就会提示我们猜的数字是否正确，以及大了还是小了。

html代码：

    重新开始一局游戏

    请输入要猜的数字：
    猜

    已经猜的次数：

    结果：

点击 猜 按钮的js代码：

        var number = Math.floor(Math.random() * 100) + 1;//要猜的数字
        console.log("number：" + number);//答案
        var count = 0;

        //点击猜，看看猜的数字对不对
        $(document).ready(function() {
            $("#userGuess").click(function() {
                count++;
                $("#count").text(count);
                var guessNum = $("#guessNum").val();
                if(guessNum > number) {
                    $("#result").text("猜大了");
                    $("#result").css("color", "red");
                } else if(guessNum < number) {
                    $("#result").text("猜小了");
                    $("#result").css("color", "red");
                } else {
                    $("#result").text("猜对了");
                    $("#result").css("color", "green");
                }
            });
        });

点击 重开游戏 按钮的js代码：

        //点击重开游戏
        $(document).ready(function() {
            $("#reset").click(function() {
                number = Math.floor(Math.random() * 100) + 1;
                console.log("要猜的数字：" + number);
                count = 0;
                $("#count").text("");
                $("#result").text("");
                $("#result").css("color", "");
                $("#guessNum").val("");
            });
        });

整体代码：

    
    
    


    重新开始一局游戏

    请输入要猜的数字：
    猜

    已经猜的次数：

    结果：

    
    

页面效果：

        猜几次：

        重开游戏：

        ​​​​​​​

        猜几次：

        没有问题。

二、留言板

        页面如下：

        ​​​​​​​

css代码：

    
    
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    

html代码：

    
        
留言板
        
输入后点击提交, 会将信息显示下方空白处
        
            谁: 
        
        
            对谁: 
        
        
            说什么: 
        
        
        
    

js代码（主逻辑在这）：

整体代码：

    
    
    
    
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    



    
        
留言板
        
输入后点击提交, 会将信息显示下方空白处
        
            谁: 
        
        
            对谁: 
        
        
            说什么: 
        
        
        
    

    
    

页面效果：

        点击提交，留言就会显示到下方。

        多提交几次：

都看到这了，点个赞再走吧，谢谢谢谢谢