留言板---加自动回复 -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板---加自动回复</title>
</head>
<style>
    .main{
        display: grid;
        margin: auto;
        text-align: center;
        place-items:center;
        border: 1px solid salmon;
    }
    .box{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 90%;
        height: 50rem;
    }
    .box .box-1{
        text-align: left;
        width: 100%;
    }
    .box .box-2{
        text-align: right;
        width: 100%;
    }
    .bottom{
        display: grid;
        grid-template-columns: repeat(1,2fr);
        width: 100%;
        height: 5rem;
        border: 1px solid salmon;
    }
    .bottom-1 input{
        width: 99%;
        /* 取消边框样式 */
        border: none; 
         /* 取消点击时候样式 */
        outline: none;
        height: 2rem;
    }
    .bottom button{
        float: right;
        width: 10rem;
        height: 100%;
    }
    li{
        list-style: none; 
    }
</style>
<body>
   <div class="main">
       <h1>留言板---加自动回复</h1>
       <div class="box">
            <div class="box-1">
                <ul class="list-1"></ul>
            </div>
            <div class="box-2">
                <ul class="list-2"></ul>   
            </div>
       </div>
       <div class="bottom">
           <div class="bottom-1">
            <input id="content" placeholder="请输入内容！！" onkeydown="addMsg(this)" autofocus value=""/>
           </div>
           <div  class="bottom-2">
            <button onclick="sendMsg(this)"> 发送</button>
           </div>
        </div>
   </div>
  <script>
      function msg(){
           // 1. 获取显示留言的容器
           const ul = document.querySelector('.list-2');
            // 2. 判断用户留言是否为空\
            let content = document.querySelector('#content');
            if (content.value.length === 0) {
                alert('留言不能为空');
                content.focus();
                return false;
            }
            // 3. 添加一条新留言
            const li = document.createElement('li');
            li.textContent = content.value;
            li.innerHTML = content.value + '------<button onclick="del(this.parentNode)">删除</button>';
            ul.insertAdjacentElement('beforeend', li);
            console.log(ul);
            // 4. 将输入框中的前一条留言清空
            content.value = null;
            content.focus();
            setTimeout(function(){
            const ul = document.querySelector('.list-1');
             // 3. 添加一条新留言
            const li = document.createElement('li');
            arr = ['自动回复','你好','写的真不错','这个是一个数组','关闭当前网页'];
            let randomArr = arr[Math.floor(Math.random() * arr.length)];
                if(randomArr == '关闭当前网页'){
                        if(confirm("您确定要关闭网页吗？")){
                            window.opener=null;
                            window.open('','_self');
                            window.close();
                        }
                }
            li.innerHTML = randomArr + '<button onclick="del(this.parentNode)">删除</button><br>';
            ul.insertAdjacentElement('beforeend', li);
            },1000);
      }
        function sendMsg(ele){
            msg();
        }
       function addMsg(ele) {
            if (event.key === 'Enter') {
                msg();
            }
        }
            // 删除
        function del(ele) {
            return confirm('是否删除?') ? ele.remove() : false;
        }
        // 页面加载时间
        window.onload=function(){
            const ul = document.querySelector('.list-1');
             // 3. 添加一条新留言
             const li = document.createElement('li');
            li.innerHTML ='欢迎访问-' + '<button onclick="del(this.parentNode)">删除</button><br>';
            ul.insertAdjacentElement('beforeend', li);
        }
  </script>
</body>
</html>
QQ截图20220405131915