收藏
批改状态：合格
老师批语：你终止写作业了, 前面的及时补上
把CSS样式合并到html页面中了， 方便运行。代码如下：
<!DOCTYPE html>
<html lang="cmn">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<!--<link rel="stylesheet" href="static/css/style1.css">-->
<style>
.elegant-aero {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
body{
background-color: #B8DDFF;
}
.elegant-aero h1 {
/*font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;*/
padding: 10px 10px 10px 20px;
display: block;
background: #C0E1FF;
border-bottom: 1px solid #B8DDFF;
margin: -20px -20px 15px;
}
.elegant-aero h1>span {
display: block;
font-size: 11px;
}
.elegant-aero label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 15px;
margin-top: 10px;
font-weight: bold;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {
color: #888;
width: 70%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.elegant-aero select {
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
}
.elegant-aero .button{
/*margin :0 auto;*/
float: right;
width: 120px;
margin-right: 40px;
padding: 10px 30px 10px 30px;
background: #66C1E4;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px #4C6E91;
-webkit-box-shadow: 1px 1px 1px #4C6E91;
-moz-box-shadow: 1px 1px 1px #4C6E91;
text-shadow: 1px 1px 1px #5079A3;
}
.elegant-aero .button:hover{
background: #3EB1DD;
}
/*_________________留言显示_________________*/
.liuyanxianshi {
margin-left:auto;
margin-right:auto;
max-width: 500px;
/*height: 500px;*/
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
ul>li{
list-style: none;
/*color: red;*/
padding :15px 0px;
}
#box-1{
/*overflow: hidden;*/
position: relative;
margin-left:auto;
margin-right:auto;
max-width: 500px;
height: 100px;
/*height: 500px;*/
/*border: lightslategray solid 1px;*/
border-bottom: lightslategray solid 2px;
}
#box-1-name{
position: absolute;
left: 10px;
top: 2px;
width: 140px;
height:20px ;
/*border: lightslategray solid 1px;*/
font-family: 微软雅黑;
font-weight: bold;
color: red;
}
#box-1-email{
position: absolute;
left: 155px;
top: 2px;
width: 200px;
height:20px ;
/*border: lightslategray solid 1px;*/
}
#box-1-message{
position: absolute;
left: 10px;
top: 30px;
width: 438px;
height:65px ;
border: lightslategray solid 1px;
}
#box-1-button{
position: absolute;
right: 5px;
top: 2px;
width: 50px;
height:20px ;
}
span{
text-align: center;
}
</style>
</head>
<body>
<div class="elegant-aero" >
<h1>个人留言板
<span>作业</span>
</h1>
<label>
<span>姓名 :</span>
<input id="name" type="text" name="name" placeholder="请输入姓名" autofocus />
</label>
<label>
<span>邮箱 :</span>
<input id="email" type="email" name="email" placeholder="请输入您的电子邮箱" />
</label>
<label>
<span>内容 :</span>
<textarea id="message" name="message" placeholder="输入您想说的内容"></textarea>
</label>
<label style="Overflow:hidden" >
<span> </span>
<input type="button" id="button1" class="button" value="提交" />
</label>
</div>
<hr>
<div class="liuyanxianshi">
<div id="div1">
<ul id="list">
<!--<li>-->
<!--<div id="box-1">-->
<!--<div id="box-1-name"><span>小猫</span></div>-->
<!--<div id="box-1-email"><span>20572080@qq.com</span></div>-->
<!--<div id="box-1-message"><span>我们一起学猫叫，一起喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵喵秒秒CM喵喵喵喵喵喵</span></div>-->
<!--<div id="box-1-button"> <button>删除</button></div>-->
<!--</div>-->
<!--</li>-->
</ul>
</div>
</div>
<script>
var btn=document.getElementById('button1');
// var btn=document.getElementsByClassName('button')[0];
var name1 = document.getElementById('name');
var email2 = document.getElementById('email');
var message3=document.getElementById('message');
// var pre=document.getElementById('select-ple');
//ul的属性
var list= document.getElementById('list');
btn.addEventListener('click',addcon);
console.log(name1.value)
function addcon(event){
//创建li
var item = document.createElement('li');
//添加内容
var nr="<div id=\"box-1\">\n" +
" <div id=\"box-1-name\"><span>"+name1.value+"</span></div>\n" +
" <div id=\"box-1-email\"><span>"+email2.value+"</span></div>\n" +
" <div id=\"box-1-message\"><span>"+message3.value+"</span></div>\n" +
" <div id=\"box-1-button\"> <button>删除</button></div>\n" +
" </div>"
item.innerHTML =nr ;
//将元素添加到页面
if(list.childElementCount===0){
list.appendChild(item);
}else{
list.insertBefore(item,list.firstElementChild)
}
//清空文本框
name1.value=null;
email2.value=null;
message3.value=null;
// return alert(name1.value);
}
//删除——代理事件
list.addEventListener('click',del);
function del(event){
if(event.target.innerText==="删除"){
if(confirm('确定删除')){
var ul =event.currentTarget;
var btn=event.target;
//li标签在按钮btn的上3层，找到3层外的爷爷节点
var li=btn.parentElement.parentElement.parentElement;
console.log(ul)
//删除委托元素中的li子节点
ul.removeChild(li);
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：1.在JS动态创建留言信息（li）中，根据老师的案例的基础上， 增加了一些标签元素，由于包含多个元素，在拼接的时候，稍微有点麻烦.
2.在增加和删除节点用的方法： appendChild() 、removeChild(）
3.动态创建节点的步骤：
第1步. 创建标签：document.createElement('li')
第2步. 给标签添加内容（innerHTML/innerText）
第3步. 将创建好的标签元素添加到页面中appendChild(）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
