综合案例（前端代码练习）：猜数字和表白墙

于 2024-04-21 14:39:26 发布
阅读量1.7k 收藏 38
点赞数 38
分类专栏： 前端基础 文章标签： 前端 状态模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cool_tao6/article/details/138028980
版权
文章详细介绍了如何用HTML、CSS和JavaScript构建一个猜数字游戏，包括输入猜测、判断结果和重置游戏功能。同时，还展示了如何使用CSS和JavaScript实现一个简单的留言板，用户可以输入消息并提交显示。
摘要由CSDN通过智能技术生成

目录

一、猜数字

html代码：

点击 猜 按钮的js代码：

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

整体代码：

页面效果：

二、留言板

css代码：

html代码：

js代码（主逻辑在这）：

整体代码：

页面效果：

一、猜数字

        页面如下：

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

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>

页面效果：

        

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

        

        多提交几次：

        

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

tao滔不绝
关注
专栏目录
猜数字游戏网页版c#代码
03-02
猜数字游戏网页版c#代码，支持多人同时游戏！
猜数字游戏代码
weixin_45481403的博客
08-21 3674
void Menu() { printf("--------- MENU ---------\n"); printf("********* 1.PLAY *********\n"); printf("********* 0.EXIT *********\n"); printf("--------------------------\n"); } void Game() { int r...
【初学者】猜数字游戏 [html、css、js]（简单版本）
m0_63032420的博客
05-24 1108
猜数字网页，新手项目。
JS实现网页端猜数字小游戏
11-20
本文实例为大家分享了JS实现网页端猜数字游戏的具体代码，供大家参考，具体内容如下 题目描述 电脑产生一个0到100之间的随机数字，并且要求用户来猜，如果用户猜的数字比这个数字大，电脑会提示“太大”，否则会提示“太小”，当用户正好猜中，电脑会提示“恭喜你猜对了，这个数是…”。在用户每次猜测之后，程序会输出用户第几次猜测。如果用户输入的根本不是一个数字，程序会告诉用户输入无效 代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字小游戏</title> <script type="te
猜数字小游戏（网页版）
X_H学Java的博客
07-21 4395
猜数字游戏的玩法大家都非常了解，本篇文章使用HTML+CSS+JavaScript实现了一个网页简易版的猜数字小游戏，本文着重介绍了功能实现，并且最后附上源码供大家参考
【代码案例】网页版表白墙 & 待办事项 （包含完整源码）
Stella-F的博客
07-21 2822
今天的两个案例就分享到这里啦~相信这对你来说一点都不难！通过这两个案例的练习，你一定对前面介绍的内容有了掌握得更加熟练了！最后，完整代码已经上传到gitee啦~如果对于前面分段给出的代码不太理解，欢迎到我的码云上自取啦！表白墙完整代码链接待办事项完整代码链接如果你觉得这篇文章对你有帮助，记得给我一键三连噢~~...
猛男必学：Web前端技术表白秘籍
资源摘要信息: "猛男表白案例——自学web前端" 本文献是为希望自学Web前端技术的读者提供的一个独特的学习资源，特别是针对那些希望通过提升技术能力来吸引他人的“猛男”们。在这里，我们将探讨如何利用网络资源和...
个人介绍网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
VX_WJ88950106的博客
08-12 9796
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML CSS 个人网页设计 WEB前端大作业代码
VX_WJ88950106的博客
08-06 386
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大........
web前端期末大作业：网站设计与实现——咖啡网站HTML+CSS+JavaScript
专注于dreamweaver网页设计制作
08-09 1910
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV......
前端搭建猜数字游戏（内附源码）
最新发布
官方推荐
04-10 3万+
基于前端基础内容实现的简易版猜数字demo，帮助前端初学者或者小白来体验前端三件套的搭配开发；
HTML实现猜数字游戏
weixin_51445423的博客
08-02 2546
控制流程语句实现经典猜数字游戏
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
weixin_36459429的博客
06-04 1510
复制代码 代码如下:简易计算机//获取随机数function GetRandomNum(Min,Max){var Range = Max - Min;var Rand = Math.random();return(Min + Math.round(Rand * Range));}//获取文本框内容function checknum(){var num = GetRandomNum(1,100);a...
HTML+JS猜数字游戏
沉静如海的博客。
08-17 8211
完成可交互的猜数字游戏。 当用户输入一个数字后，可以根据与系统生成的数字比较结果反馈给用户，大了，小了，或者猜对了。 1）输入数值比较后给出与系统数字的表结果。 2）猜中时弹出一个对话框，提示猜对了。 查看正确数字 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti...
Java实现猜数字游戏 简明 易懂 完整代码
热门推荐
qq_50916191的博客
01-06 4万+
生成随机数Random() 用户输入Scanner() 实现进入游戏的选择菜单
html写一个猜数字游戏,JS实现网页端猜数字小游戏
weixin_39637921的博客
05-30 1990
本文实例为大家分享了JS实现网页端猜数字游戏的具体代码，供大家参考，具体内容如下题目描述电脑产生一个0到100之间的随机数字，并且要求用户来猜，如果用户猜的数字比这个数字大，电脑会提示“太大”，否则会提示“太小”，当用户正好猜中，电脑会提示“恭喜你猜对了，这个数是…”。在用户每次猜测之后，程序会输出用户第几次猜测。如果用户输入的根本不是一个数字，程序会告诉用户输入无效代码实现猜数字小游戏var R...
php写猜数字游戏代码,JavaScript实现猜数字游戏实例代码
weixin_33977572的博客
03-10 305
本文主要介绍了js实现一个猜数字游戏的实例代码。具有很好的参考价值，下面跟着小编一起来看下吧看你需要猜几次才能猜到那个正确的数字！效果图：代码如下：猜数字游戏window.onload = newgame; //页面载入的时候就开始一个新的游戏window.onpopstate = popState; //处理历史记录相关事件var state, ui; //全局变量，在newgame()方法中会...
猜数字游戏网页版
H48530的博客
05-17 1726
猜数字游戏网页版本猜数字游戏页面展示：具体实现： 猜数字游戏 实现一个猜数字游戏。 随机产生一个数字，输入数字猜这个数字的大小，直到猜中这个数字。当你输入的这个数字小于这个随机数，提示猜小了，当你输入数字大于这个随机数，则提示猜大了。直到猜中这个随机数，输出恭喜你猜中了，并结束程序。 如何用网页实现猜数字游戏呢？ 我们需要用到html/css/JavaScript html用于展示 css美化界面（设置背景，颜色…） JavaScript计算 页面展示： 具体实现： <!DOCTYPE html&g
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tao滔不绝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值