收藏
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><body><div class="head"><p>留言板</p><input type="text" onkeydown="addMsg(this)" name="" id="" placeholder="请输入内容" autofocus /><ul class="list"><p class="liu">留言内容</p><ul class="rest"></ul></ul></div><style>.head {width: 400px;height: 400px;margin: auto;border: 1px solid #000;background-color: bisque;border-radius: 50px;}.head p {margin-left: 170px;}.head input {margin-left: 100px;border-radius: 20px;}.head .rest {margin-left: -40px;width: 100%;height: 270px;border-top: 1px solid #000;border-radius: 20px;list-style: none;}.head .liu {margin-left: 120px;}</style><script>function addMsg(ele) {if (event.key === "Enter") {let ul = document.querySelector(".rest");if (ele.value.trim().length === 0) {alert("留言不能为空");ele.fouse();return;}const li = document.createElement("li");const buttom = document.createElement("button");li.innerHTML = ele.value + '<button style="margin-left: 200px;background-color: blueviolet;color: #fff;border-radius: 15px;" onclick="del(this.parentNode)">删除</button>';ul.insertAdjacentElement("afterbegin", li);ele.value = null;}}function del(ele) {return confirm("是否删除?") ? ele.remove() : false;}</script></body></html>
<!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><link rel="stylesheet" href="//at.alicdn.com/t/font_3280782_jb6l34uhw5.css" /></head><body><style>.list {margin-top: 100px;margin-left: 700px;width: 400px;height: 600px;border: 3px solid blue;border-radius: 30px;}.head {background-color: blue;color: #fff;height: 50px;text-align: center;border-radius: 25px 25px 0 0;}.rest {height: 30px;background-color: #999;text-align: center;}.last {margin-top: 0px;border-top: 2px solid #999 !important;}.last input {outline: none;border: none;font-size: 18px;margin-top: 10px;width: 98%;}.bu {margin-top: 50px;margin-left: 290px;}.bu button {background-color: blue;color: #fff;border-radius: 10px;width: 100px;height: 30px;}.o .time {margin-left: 120px;}.o {height: 370px;}.o .ul1,.o .ul2 {list-style: none;}.iconfont {font-size: 34px;}.two {margin-left: 250px;}</style><div class="list"><div class="head">PHP中文网</div><div class="rest">客服:php中文网新手1314即将为您服务</div><div class="o"><div class="time">2022-4-4 16:01:30</div><ul class="ul1"></ul></div><div class="last"><input type="text" onkeydown="addMsg(this)" placeholder="请输入，按Enter直接发送消息" /><div class="bu"><button>发送</button></div></div></div><script>function addMsg(ele) {if (event.key === "Enter") {const ul = document.querySelector(".ul1");if (ele.value.trim().length === 0) {alert("不能输入空消息");ele.focus();return false;}const li = document.createElement("li");li.className = "two";li.innerHTML = ele.value + ' ：<img src="user.jpg" alt="" style="height: 42%;width: 42%;">';// ul.insertAdjacentElement("afterbegin", li);ul.append(li);ele.value = null;setTimeout(function () {const ul1 = document.querySelector(".ul1");const info = ["你好", "欢迎光临", "你慢走", "有空再来"];const tmp = info[Math.floor(Math.random() * 4)];const replay = document.createElement("li");replay.innerHTML = '<span class="iconfont icon-kefuyouxian"></span>：' + tmp;ul1.append(replay);sum += 1;}, 2000);}}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
