Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 留言板---加自动回复
Blogger Information
Blog 9
fans 0
comment 0
visits 3947
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
517 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>留言板---加自动回复</title>
  8. </head>
  9. <style>
  11.     .main{
  12.         display: grid;
  13.         margin: auto;
  14.         text-align: center;
  15.         place-items:center;
  16.         border: 1px solid salmon;
  17.     }
  18.     .box{
  19.         display: grid;
  20.         grid-template-columns: repeat(2,1fr);
  21.         width: 90%;
  22.         height: 50rem;
  25.     }
  26.     .box .box-1{
  27.         text-align: left;
  28.         width: 100%;
  30.     }
  31.     .box .box-2{
  32.         text-align: right;
  33.         width: 100%;
  34.     }
  35.     .bottom{
  36.         display: grid;
  37.         grid-template-columns: repeat(1,2fr);
  38.         width: 100%;
  39.         height: 5rem;
  40.         border: 1px solid salmon;
  41.     }
  42.     .bottom-1 input{
  43.         width: 99%;
  44.         /* 取消边框样式 */
  45.         border: none; 
  46.          /* 取消点击时候样式 */
  47.         outline: none;
  48.         height: 2rem;
  49.     }
  50.     .bottom button{
  51.         float: right;
  52.         width: 10rem;
  53.         height: 100%;
  54.     }
  55.     li{
  56.         list-style: none; 
  57.     }
  58. </style>
  59. <body>
  60.    <div class="main">
  61.        <h1>留言板---加自动回复</h1>
  62.        <div class="box">
  63.             <div class="box-1">
  64.                 <ul class="list-1"></ul>
  65.             </div>
  66.             <div class="box-2">
  67.                 <ul class="list-2"></ul>   
  68.             </div>
  69.        </div>
  70.        <div class="bottom">
  71.            <div class="bottom-1">
  72.             <input id="content" placeholder="请输入内容！！" onkeydown="addMsg(this)" autofocus value=""/>
  73.            </div>
  74.            <div  class="bottom-2">
  75.             <button onclick="sendMsg(this)"> 发送</button>
  76.            </div>
  77.         </div>
  79.    </div>
  80.   <script>
  81.       function msg(){
  82.            // 1. 获取显示留言的容器
  83.            const ul = document.querySelector('.list-2');
  85.             // 2. 判断用户留言是否为空\
  86.             let content = document.querySelector('#content');
  87.             if (content.value.length === 0) {
  88.                 alert('留言不能为空');
  89.                 content.focus();
  90.                 return false;
  91.             }
  92.             // 3. 添加一条新留言
  93.             const li = document.createElement('li');
  95.             li.textContent = content.value;
  97.             li.innerHTML = content.value + '------<button onclick="del(this.parentNode)">删除</button>';
  98.             ul.insertAdjacentElement('beforeend', li);
  99.             console.log(ul);
  100.             // 4. 将输入框中的前一条留言清空
  101.             content.value = null;
  102.             content.focus();
  103.             setTimeout(function(){
  104.             const ul = document.querySelector('.list-1');
  105.              // 3. 添加一条新留言
  106.             const li = document.createElement('li');
  107.             arr = ['自动回复','你好','写的真不错','这个是一个数组','关闭当前网页'];
  108.             let randomArr = arr[Math.floor(Math.random() * arr.length)];
  109.                 if(randomArr == '关闭当前网页'){
  110.                         if(confirm("您确定要关闭网页吗？")){
  111.                             window.opener=null;
  112.                             window.open('','_self');
  113.                             window.close();
  114.                         }
  116.                 }
  117.             li.innerHTML = randomArr + '<button onclick="del(this.parentNode)">删除</button><br>';
  119.             ul.insertAdjacentElement('beforeend', li);
  121.             },1000);
  122.       }
  123.         function sendMsg(ele){
  124.             msg();
  125.         }
  126.        function addMsg(ele) {
  127.             if (event.key === 'Enter') {
  128.                 msg();
  129.             }
  130.         }
  131.             // 删除
  132.         function del(ele) {
  134.             return confirm('是否删除?') ? ele.remove() : false;
  135.         }
  136.         // 页面加载时间
  137.         window.onload=function(){
  138.             const ul = document.querySelector('.list-1');
  139.              // 3. 添加一条新留言
  140.              const li = document.createElement('li');
  141.             li.innerHTML ='欢迎访问-' + '<button onclick="del(this.parentNode)">删除</button><br>';
  143.             ul.insertAdjacentElement('beforeend', li);
  144.         }
  148.   </script>
  149. </body>
  150. </html>

QQ截图20220405131915

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