JS+CSS模拟可以无刷新显示内容的留言板实例
本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//h2DXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS模拟可以无刷新显示内容的留言板功能</title>
<styletype="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
#parent{width:600px;margin:0auto;}
h4{line-height:40px;margin-bottom:10px;border-bottom:1pxsolid#333;color:#FF3300}
p{width:100%;background:#f1f1f1;position:relative;margin-bottom:25px;}
#box{width:580px;padding:25px10px0;border:1pxsolid#ddd;margin-bottom:10px;}
span{position:absolute;top:-20px;right:0px;}
em{position:relative;top:-13px;}
#text{width:100%;height:90px;overflow:auto;}
#btn{width:20%;height:50px;}
</style>
<scripttype="text/javascript">
i=1;
functionfnsubmit()
{
varodiv=document.getElementById("box");
varoem=odiv.getElementsByTagName("em")[0];
varotext=document.getElementById("text");
varoli=odiv.getElementsByTagName("li");
varadd_li=document.createElement("li");
varo_span=document.createElement("span");
if(otext.value=="")
{
alert("请填写留言内容！");
return;
}
oem.style.display="none";
o_span.style.position="absolute";
o_span.style.top="-20px";
o_span.style.right="20px";
o_span.style.background="#cccccc";
add_li.style.position="relative";
add_li.index=i;
add_li.style.background="#cccccc";
add_li.style.marginBottom="20px";
varstr=document.createTextNode(i+"、"+otext.value);
varstrspan=document.createTextNode("确定删除"+i+"、"+otext.value+"内容？");
add_li.appendChild(o_span);
o_span.style.display="none";
o_span.appendChild(strspan);
add_li.appendChild(str);
odiv.appendChild(add_li);
i++;
for(j=0;j<oli.length;j++)
{
varm=j;
oli[j].onmouseover=function()
{
this.style.background="#ffff00";
(this.childNodes(o_span)).style.display="block";
}; oli[j].onmouseout=function() { this.style.background="#cccccc"; (this.childNodes(o_span)).style.display="none"; }; oli[j].onclick=function() { m--; odiv.removeChild(this); if(m<0) { oem.style.display="block"; }; }; }; } </script> </head> <body> <divid="parent"> <h4>留言内容：</h4> <divid="box"><em>这里会显示留言内容……</em></div> <inputtype="text"id="text"><br/> <inputid="btn"type="button"onclick="fnsubmit()"value="发表留言"/> </div> <br/> </body> </html>