实现的一个网页版的简易表白墙

梦里梦外; 2024-05-06 21:25 135阅读 0赞

实现的一个网页版的表白墙

实现效果

image-20240307134439192

代码截图

image-20240307215605013

相关代码

  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.     <div class="container">
  10.         <h1>表白墙</h1>
  11.         <P>输入相关信息，点击提交后将会展示在表格中</P>
  12.         <div class="div1">
  13.             <span>谁：</span><input type="text" class="edit">
  14.         </div>
  15.         <div class="div1">
  16.             <span>对谁：</span><input type="text" class="edit">
  17.         </div>
  18.         <div class="div1">
  19.             <span>说：</span><input type="text" class="edit">
  20.         </div>
  21.         <div class="div1">
  22.             <input type="button" value="提交" class="submit" onclick="Submit()">
  23.         </div>
  24.     </div>
  25. </body>
  26. <style>
  27.     * {
  29.         margin: 0px;
  30.         padding: 0px;
  31.     }
  32.     .container {
  34.         width: 400px;
  35.         margin: 0 auto;
  36.     }
  37.     h1 {
  39.         text-align: center;
  40.         margin-bottom: 20px;
  41.         margin-top: 40px;
  42.     }
  43.     p {
  45.         text-align: center;
  46.         color: gray;
  47.         line-height: 63px;
  48.     }
  49.     .div1 {
  51.         display: flex;
  52.         justify-content: center;
  53.         align-items: center;
  54.     }
  55.     .edit {
  57.         margin-bottom: 20px;
  58.         width: 200px;
  59.         height: 30px;
  60.     }
  61.     span {
  63.         width: 50px;
  64.         margin-bottom: 20px;
  65.     }
  66.     .submit {
  68.         background-color: rgb(255, 136, 0);
  69.         color: white;
  70.         width: 254px;
  71.         height: 40px;
  72.         border: none;
  73.         border-radius: 5px;
  74.     }
  75.     .submit:active {
  77.         background-color: gray;
  78.     }
  80. </style>
  81. <script>
  82.     function Submit() {
  84.         let edits = document.querySelectorAll('.edit')
  85.         let from  = edits[0].value
  86.         let to  = edits[1].value
  87.         let message = edits[2].value
  88.         if(from == "" || to == "" || message == "") {
  90.             return
  91.         }
  92.         let div = document.createElement('div')
  93.         div.className = 'div1'
  94.         div.innerHTML =   from + " 对 " + to + "说：" + message 
  95.         let container = document.querySelector('.container')
  96.         container.appendChild(div)
  97.         for(i = 0; i < edits.length; i++) {
  99.             edits[i].value = "";
  100.         }
  101. }
  102. </script>
  103. </html>

发表评论

表情：
评论列表 （有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读