本文实例讲述了脚本和样式模拟可以无刷新显示内容的留言板功能。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//h2D XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/h2D/XHTML 1-Transitional。h2D ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejs CSS模拟可以无刷新显示内容的留言板功能/title style type=' text/CSS ' * { padd : 0；保证金： 0；}李{列表式：无；} # parent { width : 600 pxmargin : 0 auto } H4 { line-height : 40px；边距-底部： 10px边框-底部： 1px实心# 333;颜色： # FF3300 } p {宽度： } 100%；背景# f1f1f1相对位置：边距-底部： 25px} # box { width : 580 pxpadd : 25px 10px 0；border: 1px固体# ddd边距-底部： 10px} span { position : absolute top :-20px；right : 0px } em { position : relative top :-13px；} # text { width : 100%；高度： 90px飞越：汽车；} # BTN {宽度： 20%；高度： 50px}/style脚本类型=' text/JavaScript ' I=1；函数fn submit(){ var odiv=document。getelementbyid(' box ')；var OEM=odiv。getelementsbytagname(' em ')[0]；var otext=文档。getelementbyid(' text ')；var oli=odiv。getelementsbytagname(' Li ')；var add _ Li=文档。创建元素(“李”)；var o _ span=文档。创建元素(“span”)；if(otext.value==''){alert('请填写留言内容!');返回；} OEM。风格。显示='无'；o_span.style.position='绝对；o _ span。风格。top='-20px '；o _ span。风格。right=' 20pxo _ span。风格。背景=' # ccccccadd _ Li。风格。position=“相对”；add _ Li。指数=I；add _ Li。风格。背景=' # ccccccadd _ Li。风格。marginbottom=' 20pxvar str=文档。createtextnode(I '，' otext。值)；var strspan=文档。createtextnode('确定删除' I '，' otext.value '内容？');add _ Li。append child(o _ span)；o _ span。风格。display=" noneo _ span。appendchild(字符串跨度)；add _ Li。appendchild(字符串)；奥迪夫。append child(add _ Li)；我；for(j=0；joli . length j){ var m=j；奥利[j].onmouseover=function(){ this。风格。背景=' # ffff 00(这个。子节点(o _ span))。风格。display=' block

};奥利[j].onmouseout=function(){ this。风格。背景=' # cccccc(这个。子节点(o _ span))。风格。显示='无'；};奥利[j].onclick=function(){ m-；奥迪夫。移除子(此)；if(m0){ OEM。风格。display=' block};};};}/script/head dydiv id=' parent ' H4留言内容：/h4div id='box'em这里会显示留言内容……/em/divinput type=' text ' id=' text ' br/input id=' BTN ' type=' button ' onclick=' fnsubmit()' value='发表留言//divbr //body/html

运行效果如下图所示：

希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。