收藏
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><style>* {margin: 0;padding: 0;box-sizing: border-box;}body .lyb .srk input {padding: 30px;height: 50px;width: 200px;border-radius: 5px;outline: none;}.lyb {width: 50%;height: 100%;background-color: cadetblue;}.srk {display: grid;place-content: center;height: 100px;}ul {position: relative;}li {list-style: none;}button {font-size: 15px;line-height: 15px;text-align: center;border-radius: 50%;background-color: mediumvioletred;position: absolute;right: 0;}</style></head><body><div class="lyb"><div class="srk"><inputtype="text"onkeydown="addMsg(this)"placeholder="请输入类容"autofocus/></div><ul class="list"></ul></div><script>function addMsg(ele) {if (event.key === 'Enter') {// 获取留言板类容const ul = document.querySelector('.list');//判断用户留言是否为空if (ele.value.trim().length === 0) {alert('留言不能为空');ele.focus();return false;}//添加一条留言const li = document.createElement('li');li.innerHTML =ele.value + '<button onclick="del(this.parentNode)">删除</button>';ul.insertAdjacentElement('afterBegin', li);//将输入框中的前一条留言清空ele.value = null;//焦点重置ele.focus();}}//删除function del(ele) {return confirm('是否删除' ? ele.remove() : false);}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
