完成一个简单的用户留言本
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完成一个简单的用户留言本</title>
<style>
.box{
padding: 10px 20px;
border:1px solid slategray;
}
.box h2{
text-align: center;
color:brown;
}
.box ul{
margin: 0;
padding: 20px 50px;
}
.box ul li{
list-style: none;
height: 40px;
line-height: 40px;
border-bottom:1px solid lightgray;
}
.box ul li button{
height: 30px;
color:red;
float:right;
margin-top:5px;
}
</style>
</head>
<body>
<div class="box">
<h2>留言板</h2>
<label for="comment">请输入留言内容:</label>
<input type="text" id="comment" onkeydown="addComment1(this)" autofocus>
<!--留言列表-->
<ul id="list"></ul>
</div>
<script>
function addComment1(comment){
if(event.keyCode ===13){
// console.log('aaa')
// 1. 创建新留言,并添加到留言列表中
var item=document.createElement('li');
item.innerHTML=comment.value;
//添加删除按钮
item.innerHTML+='<button onclick="del(this)">删除</button>';
// 2. 将留言添加到列表中
var list=document.querySelector('#list');
// 如果当前留言列表为空, 则直接插入到到尾部,否则就插入到第一条留言之前
if(list.childElementCount===0){
list.append(item);
}else{
var first=list.firstElementChild;
// list.insertBefore(item,first);
list.prepend(item,first);
}
//3. 清空文本框
comment.value='';
}
}
// 删除留言函数
// function del(ele){
// if(confirm('是否删除？')){
// //获取删除按钮的父元素 Li
// var li=ele.parentNode;
// // 删除节点只能在当前节点的父元素上进行
// li.parentNode.removeChild(li);
// }
// return false;
// }
function del(ele){
return confirm('是否删除') ? ele.parentElement.remove() : false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
