JavaScript极速入门-综合案例(3)

综合案例

猜数字

预期效果

代码实现

html 复制代码

    <button type="button" id="reset">重新开始一局游戏</button>
    <br>
    请输入要猜的数字:<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数:<span id="count">0</span>
    <br>
    结果:<span id="result"></span>
    <script>
        $(function(){
            //先随机生成一个1-100的数字
            var guessNumber = Math.floor(Math.random() * 100) + 1; //Math.random()会生成1-100的数字
            var count = 0;
            //click:点击
            //事件驱动:只有真正发生了点击事件时,才会执行该函数
            $("#button").click(function() {
                count++;
                $("#count").text(count);
                var userGuess = parseInt($("#number").val());
                if(userGuess == guessNumber) {
                    $("#result").text("猜对了");
                    $("#result").css("color", "green");
                } else if(userGuess < guessNumber) {
                    $("#result").text("猜小了");
                    $("#result").css("color", "red");
                } else {
                    $("#result").text("猜大了");
                    $("#result").css("color", "red");
                }
                $("#number").val("");
            });
            $("#reset").click(function(){
                guessNumber = Math.floor(Math.random() * 100) + 1;
                count = 0;
                $("#count").text(count);
                $("#result").text("");
                $("#number").val("");
            });
        });
    </script>

表白墙

预期效果

**需求:**按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方.

代码实现

1.提前准备如下HTML和CSS代码

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>
    <style>
        * {
            margin: 0;
            padding: 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 class="edit" type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <span>说什么: </span>
            <input class="edit" type="text">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>
</body>

</html>

2.实现提交

html 复制代码

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            // 给点击按钮注册点击事件
            $(".submit").click(function () {
                // 1. 获取到编辑框内容
                var from = $('.edit:eq(0)').val();
                var to = $('.edit:eq(1)').val();
                var message = $('.edit:eq(2)').val();
                console.log(from + "," + to + "," + message);
                if (from == '' || to == '' || message == '') {
                    return;
                }
                // 2. 构造 html 元素
                var html = '<div class="row">' + from + '对' + to + '说: ' + message + '<div class="row">';
                // 3. 把构造好的元素添加进去
                $('.container').append(html);
                // 4. 同时清理之前输⼊框的内容
                $(":text").val("");
            });
        });
    </script>

总结

1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和JavaScript来使用

2.学习HTML主要是学习标签,HTML标签特别多,了解基本语法即可

3.CSS重点是学习CSS选择器的使用

4.JavaScript是一个脚本语言,与Java没有关系.JQuery是一个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率.

5.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可