收藏
PHPz批改状态：合格
老师批语：
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
