实例 html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="article">
<label for="" class="wz">留言内容</label>
<ul id="list" class="li">
</ul>
<div class="input">
<div class="text">
<label for="">请留言</label>
<input type="text" id="comment" autofocus style="width: 400px">
</div>
</div>
</div>
<script>
var comment =document.getElementById('comment');
//留言列表
var list =document.getElementById('list');
//为留言框添加事件监听
comment.addEventListener('keypress', addComment, false);
//keypress事件方法
// var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");
function addComment(event) {
//事件方法中永远存在一个默认的事件对象
if(event.key ==='Enter'){
//创建一个元素
var item=document.createElement('li');
//添加内容
item.innerHTML ='内容：'+ comment.value+' 时间：'+new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')+' 操作' +' <span class="button"> <buttn>删除</buttn></span>';
//添加留言内容
if(list.childElementCount ===0){
list.appendChild(item);
}else {
list.insertBefore(item,list.firstElementChild);
}
//清空留言
comment.value=null;
}
}
//事件代理
list.addEventListener('click',del,false);
function del(event) {
if (confirm('是否删除')){
//父节点
// var ul =event.currentTarget;
// var btn = event.target;
// //要删除的节点
// var li = btn.parentElement;
// ul.removeChild(li);
event.currentTarget.removeChild(event.target.parentElement);
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 CSS内容
.article{
height: 400px;
width: 900px;
background-color: lightblue;
border-radius: 15px;
border: 1px solid lightgreen;
}
.wz{
text-align: center;
color: lightseagreen;
/*background-color: #4a4a5c;*/
position: absolute;
left: 400px;
}
.input{
height: 50px;
width:450px;
/*background-color:lightblue ;*/
/*position: absolute;*/
/*left: -400px;*/
}
.text{
position: absolute;
left: 200px;
top: 380px;
color: lightseagreen;
}
.button{
background-color: #1D1F21;
color: #eeeeee;
}
.li{
position: absolute;
top: 25px;
/*text-align: center;*/
left: 40px;
background-color: lightsalmon;
border: 1px dashed black;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
