Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单的留言板功能
Blogger Information
Blog 18
fans 0
comment 0
visits 8465
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单的留言板功能
时间在渗透
Original
568 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>简单的留言板功能</title>
  9.     <style type="text/css">
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         body {
  17.             background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  18.             height: 98.5vh;
  19.         }
  21.         .container {
  22.             margin: 0 auto;
  23.             padding: 0 20px;
  24.             max-width: 1170px;
  25.         }
  27.         h1 {
  28.             margin: 15px 0;
  29.         }
  31.         textarea {
  32.             display: block;
  33.             width: 100%;
  34.             height: auto;
  35.             min-height: 300px;
  36.             line-height: 20px;
  37.             margin-bottom: 20px;
  38.             padding: 5px 10px;
  39.             border: 1px solid transparent;
  40.             border-radius: 2px;
  41.             transition: all .3s;
  42.             outline: 0;
  43.             resize: vertical;
  44.         }
  46.         textarea:focus {
  47.             border-color: #03a9f4 !important;
  48.         }
  50.         button {
  51.             min-width: 100px;
  52.             height: 38px;
  53.             line-height: 38px;
  54.             border: 1px solid #eaeaea;
  55.             color: #666;
  56.             padding: 0 18px;
  57.             background-color: #fff;
  58.             text-align: center;
  59.             font-size: 14px;
  60.             border-radius: 2px;
  61.             cursor: pointer;
  62.             transition: all .3s;
  63.         }
  65.         button:hover {
  66.             opacity: .8;
  67.             border-color: #03a9f4;
  68.         }
  70.         .list>li {
  71.             display: flex;
  72.             place-content: space-between;
  73.             background-color: #fff;
  74.             line-height: 36px;
  75.             margin-bottom: 5px;
  76.             border-radius: 5px;
  77.             padding: 0 8px;
  79.         }
  80.     </style>
  81. </head>
  83. <body>
  84.     <div class="container">
  85.         <h1 style="text-align: center;">留言板</h1>
  86.         <div class="message" style="margin-bottom: 20px;">
  87.             <textarea placeholder="请输入留言内容, 也可以使用快捷键Ctrl+Enter提交"></textarea>
  88.             <div style="text-align: right;">
  89.                 <button>提交</button>
  90.             </div>
  91.         </div>
  92.         <ul class="list">
  93.         </ul>
  94.     </div>
  95.     <script>
  96.         let text = document.querySelector("textarea");
  97.         let btn = document.querySelector("button");
  98.         let list = document.querySelector(".list");
  101.         // 监听提交快捷键: Ctrl+Enter
  102.         text.addEventListener('keypress', function (event) {
  103.             if (event.key == "\n") {
  104.                 btn.click();
  105.             }
  106.         })
  108.         // 监听点击提交按钮
  109.         btn.addEventListener('click', function (event) {
  110.             submit();
  111.         })
  113.         function submit() {
  114.             if (text.value.length === 0) {
  115.                 alert('留言不能为空');
  116.                 text.focus();
  117.                 return false;
  118.             }
  119.             let itemsView = `
  120.                 <li>
  121.                     <div>${text.value}</div>
  122.                     <div>${getDate()}</div>
  123.                 </li>
  124.             `;
  125.             list.insertAdjacentHTML("afterbegin", itemsView);
  126.             text.value = '';
  127.             alert('提交成功');
  128.         }
  130.         function getDate() {
  131.             let date = new Date();
  132.             return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDay() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
  133.         }
  135.     </script>
  136. </body>
  138. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：做得很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post