1.实现的效果要求:
- 通过输入框输入内容
- 点击留言按钮，发布到留言板上
- 可以点击留言后面的删除选项进行删除
- 能正确统计出留言板上的留言数量，并用弹框的形式显示出来
- 如果输入框没有内容，点击留言按钮，无法进行留言，同时弹出提示框告知输入内容为空不能留言
2.代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="new_file.css"/>
<script type="text/javascript">
window.onload=function(){
var ly=document.getElementById("ly");
var i=1;
ly.onclick=function(){
var te=document.getElementById("textss").value;
if(te!=""){
var ptext=document.createElement("p");
var span=document.createElement("span");
ptext.innerText=i+"."+te+" ";
ptext.className="content";
span.innerText="X";
output.appendChild(ptext);
ptext.appendChild(span);
document.getElementById("textss").value="";
var dels=document.getElementsByTagName("span");
var ptexts=document.getElementsByTagName("p");
for (var j=0;j<dels.length;j++) {
dels[j].index=j;
ptexts[j].index=j
dels[j].onclick = function () {
dels[this.index].remove();
ptexts[this.index].remove();
}
}
i++;
}else{
alert("输入的内容不能为空！！！！");
}
}
document.getElementById("count").onclick=function(){
alert("留言的数量为:"+(i-1));
}
}
</script>
</head>
<body>
<div id="aa">
<h1>简易留言板</h1>
<div id="output">
</div>
<textarea id="textss" cols="25" rows="2" style="float: left;"></textarea><br/>
<input id="ly" type="button" value="留言"/>
<input id="count" type="button" value="统计"/>
</div>
</body>
</html>
3.页面上的效果:
