<h1>留言板<h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{
width: 370px;
border:1px solid rgb(193,193,193);
padding: 20px;
background: rgb(243,243,243);
}
#txt1{
width: 315px;
height: 20px;
}
#s1{
display: inline-block;
position: relative;
top: -140px;
}
#btn1{
width: 100px;
height: 30px;
font-size: 16px;
color: rgb(100,100,100);
background: rgb(249,249,249);
border:1px solid rgb(203,203,203);
margin-left: 40px;
}
#h2{
padding-top:10px;
}
a{
float: right;
}
</style>
</head>
<body>
<!-- 结构 -->
<div id="wrap">
<span>姓名:</span>
<input type="text" id="txt1"><br><br>
<span id="s1">内容:</span>
<textarea name="" id="txta" cols="50" rows="10" style="resize: none;"></textarea><br><br>
<button id="btn1">提交</button>
<h2 id="h2">显示留言</h2>
<div id="main"></div>
</div>
<!-- 行为 -->
<script>
function bind(){
//获取元素
var txt = document.getElementById('txt1');
var txta = document.getElementById('txta');
var btn = document.getElementById('btn1');
var wrap = document.getElementById('wrap');
//提交按钮的点击事件
btn.onclick = function click(){
//创建两个 p 标签和一个div
var p1 = document.createElement('p');
var p2 = document.createElement('p');
//创建一个div来包裹p1和p2
var main = document.createElement('div');
//将输入的内容分别给两个 p 标签
var con1 = txt.value;
var con2 = txta.value;
//把txt和txta里面的内容给p1和p2，然后在网页中打印出来
p1.innerHTML = con1;
p2.innerHTML = con2 + "<a href='###'>删除</a>";
//判断当用户没输入内容时弹出提示
if(txt.value == "" || txta.value == ""){
alert('用户名或内容未填写');
}else{
//将 p 标签的内容添加到一个大的div里面
main.appendChild(p1);
main.appendChild(p2);
//将div里内容添加到主页面wrap中
wrap.appendChild(main);
}
//点击提交按钮清空文本框和文本域里的内容
txt.value = "";
txta.value = "";
//p1的样式
p1.style.height = '40px';
p1.style.paddingLeft = '10px';
p1.style.backgroundColor = 'rgb(220,220,220)';
p1.style.borderBottom = '1px solid rgb(203,203,203)';
p1.style.lineHeight = '40px';
//p2的样式
p2.style.height = '30px';
p2.style.paddingLeft = '50px';
p2.style.backgroundColor = 'rgb(253,253,253)';
p2.style.borderBottom = '1px solid rgb(203,203,203)';
p2.style.lineHeight = '30px';
//
main.style.transition = 'all 2s';
//a标签的获取和点击事件
var anchor = p2.getElementsByTagName('a');
anchor[0].onclick = function(){
//移除对象
wrap.removeChild(main);
}
}
}
bind();
</script>
</body>
</html>
Paste_Image.png
Paste_Image.png
![Upload Paste_Image.png failed. Please try again.]
Paste_Image.png
网友评论