devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-04-26 04:00:54

赞

踩

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

目录

一、猜数字

html代码：

点击 猜 按钮的js代码：

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

整体代码：

页面效果：

二、留言板

css代码：

html代码：

js代码（主逻辑在这）：

整体代码：

页面效果：

一、猜数字

        页面如下：

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

html代码：

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

点击 猜 按钮的js代码：

  1.         var number = Math.floor(Math.random() * 100) + 1;//要猜的数字
  2.         console.log("number：" + number);//答案
  3.         var count = 0;
  4.  
  5.         //点击猜，看看猜的数字对不对
  6.         $(document).ready(function() {
  7.             $("#userGuess").click(function() {
  8.                 count++;
  9.                 $("#count").text(count);
  10.                 var guessNum = $("#guessNum").val();
  11.                 if(guessNum > number) {
  12.                     $("#result").text("猜大了");
  13.                     $("#result").css("color", "red");
  14.                 } else if(guessNum < number) {
  15.                     $("#result").text("猜小了");
  16.                     $("#result").css("color", "red");
  17.                 } else {
  18.                     $("#result").text("猜对了");
  19.                     $("#result").css("color", "green");
  20.                 }
  21.             });
  22.         });

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

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

整体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button id="reset">重新开始一局游戏</button><br/>
  10.     请输入要猜的数字：<input type="text" id ="guessNum">
  11.     <button id="userGuess">猜</button><br/>
  12.     已经猜的次数：<span id="count"></span><br/>
  13.     结果：<span id="result"></span>
  14.  
  15.     <script src="jquery-3.7.1.min.js"></script></body>
  16.     <script>
  17.         var number = Math.floor(Math.random() * 100) + 1;//要猜的数字
  18.         console.log("number：" + number);
  19.         var count = 0;
  20.         //点击猜，看看猜的数字对不对
  21.         $(document).ready(function() {
  22.             $("#userGuess").click(function() {
  23.                 count++;
  24.                 $("#count").text(count);
  25.                 var guessNum = $("#guessNum").val();
  26.                 if(guessNum > number) {
  27.                     $("#result").text("猜大了");
  28.                     $("#result").css("color", "red");
  29.                 } else if(guessNum < number) {
  30.                     $("#result").text("猜小了");
  31.                     $("#result").css("color", "red");
  32.                 } else {
  33.                     $("#result").text("猜对了");
  34.                     $("#result").css("color", "green");
  35.                 }
  36.             });
  37.         });
  38.         
  39.         //点击重开游戏
  40.         $(document).ready(function() {
  41.             $("#reset").click(function() {
  42.                 number = Math.floor(Math.random() * 100) + 1;
  43.                 console.log("要猜的数字：" + number);
  44.                 count = 0;
  45.                 $("#count").text("");
  46.                 $("#result").text("");
  47.                 $("#result").css("color", "");
  48.                 $("#guessNum").val("");
  49.             });
  50.         });
  51.     </script>
  52. </body>
  53. </html>

页面效果：

        

        猜几次：

        重开游戏：

        ​​​​​​​

        猜几次：

        没有问题。

二、留言板

        页面如下：

        ​​​​​​​

css代码：

  1.     <title>留言板</title>
  2.     <style>
  3.         .container {
  4.             width: 350px;
  5.             height: 300px;
  6.             margin: 0 auto;
  7.             /* border: 1px black solid; */
  8.             text-align: center;
  9.         }
  10.  
  11.         .grey {
  12.             color: grey;
  13.         }
  14.  
  15.         .container .row {
  16.             width: 350px;
  17.             height: 40px;
  18.  
  19.             display: flex;
  20.             justify-content: space-between;
  21.             align-items: center;
  22.         }
  23.  
  24.         .container .row input {
  25.             width: 260px;
  26.             height: 30px;
  27.         }
  28.  
  29.         #submit {
  30.             width: 350px;
  31.             height: 40px;
  32.             background-color: orange;
  33.             color: white;
  34.             border: none;
  35.             margin: 10px;
  36.             border-radius: 5px;
  37.             font-size: 20px;
  38.         }
  39.     </style>

html代码：

  1.     <div class="container">
  2.         <h1>留言板</h1>
  3.         <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
  4.         <div class="row">
  5.             <span>谁:</span> <input type="text" name="" id="from">
  6.         </div>
  7.         <div class="row">
  8.             <span>对谁:</span> <input type="text" name="" id="to">
  9.         </div>
  10.         <div class="row">
  11.             <span>说什么:</span> <input type="text" name="" id="say">
  12.         </div>
  13.         <input type="button" value="提交" id="submit" onclick="submit()">
  14.         <!-- <div>A 对 B 说: hello</div> -->
  15.     </div>

js代码（主逻辑在这）：

  1.     <script src="jquery-3.7.1.min.js"></script>
  2.     <script>
  3.         function submit() {
  4.             var from = $("#from").val();
  5.             var to = $("#to").val();
  6.             var say = $("#say").val();
  7.             var content = "<div>" + from + "对" + to + "说" + say + "</div>";
  8.             console.log(content);
  9.             $(".container").append(content);   
  10.             $("#from").val("");
  11.             $("#to").val("");
  12.             $("#say").val("");     
  13.         };
  14.     </script>

整体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>留言板</title>
  8.     <style>
  9.         .container {
  10.             width: 350px;
  11.             height: 300px;
  12.             margin: 0 auto;
  13.             /* border: 1px black solid; */
  14.             text-align: center;
  15.         }
  16.  
  17.         .grey {
  18.             color: grey;
  19.         }
  20.  
  21.         .container .row {
  22.             width: 350px;
  23.             height: 40px;
  24.  
  25.             display: flex;
  26.             justify-content: space-between;
  27.             align-items: center;
  28.         }
  29.  
  30.         .container .row input {
  31.             width: 260px;
  32.             height: 30px;
  33.         }
  34.  
  35.         #submit {
  36.             width: 350px;
  37.             height: 40px;
  38.             background-color: orange;
  39.             color: white;
  40.             border: none;
  41.             margin: 10px;
  42.             border-radius: 5px;
  43.             font-size: 20px;
  44.         }
  45.     </style>
  46. </head>
  47.  
  48. <body>
  49.     <div class="container">
  50.         <h1>留言板</h1>
  51.         <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
  52.         <div class="row">
  53.             <span>谁:</span> <input type="text" name="" id="from">
  54.         </div>
  55.         <div class="row">
  56.             <span>对谁:</span> <input type="text" name="" id="to">
  57.         </div>
  58.         <div class="row">
  59.             <span>说什么:</span> <input type="text" name="" id="say">
  60.         </div>
  61.         <input type="button" value="提交" id="submit" onclick="submit()">
  62.         <!-- <div>A 对 B 说: hello</div> -->
  63.     </div>
  64.  
  65.     <script src="jquery-3.7.1.min.js"></script>
  66.     <script>
  67.         function submit() {
  68.             var from = $("#from").val();
  69.             var to = $("#to").val();
  70.             var say = $("#say").val();
  71.             var content = "<div>" + from + "对" + to + "说" + say + "</div>";
  72.             console.log(content);
  73.             $(".container").append(content);   
  74.             $("#from").val("");
  75.             $("#to").val("");
  76.             $("#say").val("");     
  77.         };
  78.     </script>
  79. </body>
  80.  
  81. </html>

页面效果：

        

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

        

        多提交几次：

        

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/488890
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号