本文實例講述了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程式設計有所幫助。
