![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><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>:root {margin: 0;padding: 0;box-sizing: border-box;}.box {width: 450px;position: fixed;}.box fieldset {background-color: lightseagreen;height: 300px;padding: 20px 30px;outline: none;border: 1px solid #ddd;}.box fieldset label {font-size: 18px;color: #fff;}.box fieldset legend {font-size: 16px;background-color: lightsalmon;color: white;padding: 8px 20px;}.box fieldset textarea {width: 450px;outline: none;border: 1px solid #ddd;margin: 10px auto;}.box fieldset button {border: none;background-color: lightsalmon;color: #fff;font-size: 16px;width: 100px;height: 30px;line-height: 30px;position: absolute;right: 20px;bottom: 20px;cursor: pointer;}.list {width: 500px;height: 326px;background-color: lightgreen;position: fixed;left: 540px;}</style><script>function addMsg() {// 1.获取留言内容let msg = document.getElementById("yourMsgs");// 2.获取显示留言的容器const ul = document.querySelector('.list');// 3.判断用户留言是否为空if (msg.value.trim().length === 0){alert("留言不能为空");msg.focus;//如果不用 return false 则会继续继续执行后面的代码，增加一个空节点return false;}// 4.添加一条新留言const li = document.createElement('li');li.innerHTML = msg.value + '<button onclick="del(this.parentNode)">删除</button>';ul.insertAdjacentElement('afterBegin',li);// 5.将输入框中的前一条留言清空msg.value = null;// 6.重置输入框焦点msg.focus;}function del(ele){// ele.remove(); //也可以用 ele.outerHTML = null;return confirm("您确定删除该留言吗？") ? ele.remove(): false;}function myMsg(ele) {if (event.key === 'Enter'){// 1.获取显示留言的容器const ul = document.querySelector('.list');// 3.判断用户留言是否为空if (ele.value.trim().length === 0){alert("留言不能为空");ele.focus;//如果不用 return false 则会继续继续执行后面的代码，增加一个空节点return false;}// 4.添加一条新留言const li = document.createElement('li');li.innerHTML = ele.value + '<button onclick="del(this.parentNode)">删除</button>';ul.insertAdjacentElement('afterBegin',li);// 5.将输入框中的前一条留言清空ele.value = null;// 6.重置输入框焦点ele.focus;}}</script><body><div class="box"><fieldset><legend>留言板</legend><label for="yourMsgs">请输入您的留言</label><textarea name="msgs" id="yourMsgs" onkeydown="myMsg(this)" cols="30" rows="10" placeholder="请输入您的留言" autofocus></textarea><button onclick="addMsg()">提交留言</button></fieldset></div><ul class="list"></ul></body></html>
