综合案例(前端代码练习):猜数字和表白墙

简介: 综合案例(前端代码练习):猜数字和表白墙

一、猜数字


       页面如下

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

html代码

    <button id="reset">重新开始一局游戏</button><br/>
    请输入要猜的数字:<input type="text" id ="guessNum">
    <button id="userGuess">猜</button><br/>
    已经猜的次数:<span id="count"></span><br/>
    结果:<span id="result"></span>

点击 猜 按钮的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("");
            });
        });

整体代码

<!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/>
    请输入要猜的数字:<input type="text" id ="guessNum">
    <button id="userGuess">猜</button><br/>
    已经猜的次数:<span id="count"></span><br/>
    结果:<span id="result"></span>
 
    <script src="jquery-3.7.1.min.js"></script></body>
    <script>
        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");
                }
            });
        });
        
        //点击重开游戏
        $(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("");
            });
        });
    </script>
</body>
</html>

页面效果:

       

       猜几次

      重开游戏

       

       猜几次

       没有问题。


二、留言板


       页面如下:

       

css代码:

    <title>留言板</title>
    <style>
        .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;
        }
    </style>

html代码:

    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

js代码(主逻辑在这):

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        function submit() {
            var from = $("#from").val();
            var to = $("#to").val();
            var say = $("#say").val();
            var content = "<div>" + from + "对" + to + "说" + say + "</div>";
            console.log(content);
            $(".container").append(content);   
            $("#from").val("");
            $("#to").val("");
            $("#say").val("");     
        };
    </script>

整体代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .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;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>
 
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        function submit() {
            var from = $("#from").val();
            var to = $("#to").val();
            var say = $("#say").val();
            var content = "<div>" + from + "对" + to + "说" + say + "</div>";
            console.log(content);
            $(".container").append(content);   
            $("#from").val("");
            $("#to").val("");
            $("#say").val("");     
        };
    </script>
</body>
 
</html>

页面效果:

       

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

       

       多提交几次:

       

相关文章
|
1月前
|
前端开发 JavaScript 开发者
水墨代码:前端川的诞生——在夏日阴雨中启航
【前端川】网站于农历五月初一(2024年6月6日)上线,融合水墨画与现代前端技术,呈现独特的水墨代码美学。创建者陈川分享技术心得与实战经验,网站特色包括水墨风格界面、技术深度解析及实战案例。在夏日雨中启航,"前端川"致力于为开发者提供灵感与帮助,探索前端技术的无限可能。
65 17
|
26天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
34 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
13天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
22天前
|
前端开发 Shell 容器
前端练习小项目——视觉冲击卡片
前端练习小项目——视觉冲击卡片
|
19天前
|
JSON 前端开发 JavaScript
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
SSMP整合案例第五步 在前端页面上拿到service层调数据库里的数据后列表
22 2
|
19天前
|
缓存 负载均衡 前端开发
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
SSMP整合案例第八步 前端页面的分页功能完善与维护和实现条件查询
13 1
|
19天前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
17 1
|
20天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
21 2
|
1月前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
48 4
|
8天前
|
前端开发 应用服务中间件 nginx
安装Windows版nginx以及部署前端代码并就解决刷新出现404
安装Windows版nginx以及部署前端代码并就解决刷新出现404
18 0