本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: JS+CSS模拟可以无刷新显示内容的留言板功能 <br /> * { padding: 0; margin: 0; }<br /> li { list-style: none; }<br /> #parent { width: 600px; margin: 0 auto; }<br /> h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; color:#FF3300 }<br /> p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }<br /> #box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }<br /> span { position: absolute; top: -20px; right: 0px; }<br /> em { position: relative; top: -13px; }<br /> #text { width: 100%; height: 90px; overflow: auto; }<br /> #btn { width: 20%; height: 50px; }<br /> <br /> i=1;<br /> function fnsubmit()<br /> {<br /> var odiv=document.getElementById("box");<br /> var oem=odiv.getElementsByTagName("em")[0];<br /> var otext=document.getElementById("text");<br /> var oli=odiv.getElementsByTagName("li");<br /> var add_li=document.createElement("li");<br /> var o_span=document.createElement("span");<br /> if(otext.value=="")<br /> {<br /> alert("请填写留言内容!");<br /> return;<br /> }<br /> oem.style.display="none";<br /> o_span.style.position="absolute";<br /> o_span.style.top="-20px";<br /> o_span.style.right="20px";<br /> o_span.style.background="#cccccc";<br /> add_li.style.position="relative";<br /> add_li.index=i;<br /> add_li.style.background="#cccccc";<br /> add_li.style.marginBottom="20px";<br /> var str=document.createTextNode(i+"、"+otext.value);<br /> var strspan=document.createTextNode("确定删除"+i+"、"+otext.value+"内容?");<br /> add_li.appendChild(o_span);<br /> o_span.style.display="none";<br /> o_span.appendChild(strspan);<br /> add_li.appendChild(str);<br /> odiv.appendChild(add_li);<br /> i++;<br /> for(j=0;j<oli.length;j++)<br /> {<br /> var m=j;<br /> oli[j].onmouseover=function()<br /> {<br /> this.style.background="#ffff00";<br /> (this.childNodes(o_span)).style.display="block"; <p>};<br /> oli[j].onmouseout=function()<br /> {<br /> this.style.background="#cccccc";<br /> (this.childNodes(o_span)).style.display="none";<br /> };<br /> oli[j].onclick=function()<br /> {<br /> m--;<br /> odiv.removeChild(this); <br /> if(m<0)<br /> {<br /> oem.style.display="block";<br /> };<br /> };<br /> };<br /> }<br /> 留言内容: 这里会显示留言内容…… 运行效果如下图所示: 希望本文所述对大家的javascript程序设计有所帮助。