<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<input id="msg" type="text" value="" />
<input id="btn" type="button" value="留言" />
<input id="btn1" type="button" value="统计条数"/>
<div id="msgshow"></div>
<script type="text/javascript">
var count = 0;
window.onload = function(){
var msg = document.getElementById("msg");
var btn = document.getElementById("btn");
var msgshow = document.getElementById("msgshow");
var ul = document.createElement("ul"); //定义一个语序列表
msgshow.appendChild(ul); //向msgshow里面放入无序列表
btn.οnclick=function(){
var msgvalue = msg.value;
var li = document.createElement("li"); //创建一个li标签
li.innerHTML = msgvalue+"<span class='one'>----删除----</span>";
var arrayLi = ul.getElementsByTagName("li"); //判断是否是第一个留言
if(arrayLi.length>0){
ul.insertBefore(li,arrayLi[0]); //将新的留言插入到第一个
count++;
}else{
ul.appendChild(li); //将li标签插入到ul里
count++;
}
msg.value="";
var span = document.getElementsByTagName("span");
for(var i=0;i<span.length;i++){
span[i].onclick = function(){
ul.removeChild(this.parentNode); //删除节点
count--; //删除之后，统计条数--；
}
}
}
}
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
alert("目前的留言数是"+count+"条");
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<input id="msg" type="text" value="" />
<input id="btn" type="button" value="留言" />
<input id="btn1" type="button" value="统计条数"/>
<div id="msgshow"></div>
<script type="text/javascript">
var count = 0;
window.onload = function(){
var msg = document.getElementById("msg");
var btn = document.getElementById("btn");
var msgshow = document.getElementById("msgshow");
var ul = document.createElement("ul"); //定义一个语序列表
msgshow.appendChild(ul); //向msgshow里面放入无序列表
btn.οnclick=function(){
var msgvalue = msg.value;
var li = document.createElement("li"); //创建一个li标签
li.innerHTML = msgvalue+"<span class='one'>----删除----</span>";
var arrayLi = ul.getElementsByTagName("li"); //判断是否是第一个留言
if(arrayLi.length>0){
ul.insertBefore(li,arrayLi[0]); //将新的留言插入到第一个
count++;
}else{
ul.appendChild(li); //将li标签插入到ul里
count++;
}
msg.value="";
var span = document.getElementsByTagName("span");
for(var i=0;i<span.length;i++){
span[i].onclick = function(){
ul.removeChild(this.parentNode); //删除节点
count--; //删除之后，统计条数--；
}
}
}
}
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
alert("目前的留言数是"+count+"条");
}
</script>
</body>
</html>
9349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
