This example describes the JS+CSS simulation can not refresh the display content of the message board function. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//h2d XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d ">
<TITLE>JS+CSS simulation can not refresh the display content of the message board features </title>
<style type= "Text/css" >
* {padding:0; margin:0;}
Li {list-style:none;}
#parent {width:600px; margin:0 auto;}
h4 {line-height:40px; margin-bottom:10px border-bottom:1px solid #333; color: #FF3300}
p {width:100%; background: #f1f1f1; position:relative; margin-bottom:25px;}
#box {width:580px; padding:25px 10px 0; border:1px solid #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>
<script type= "Text/javascript" >
I=1;
function Fnsubmit ()
{
var Odiv=document.getelementbyid ("box");
var oem=odiv.getelementsbytagname ("em") [0];
var Otext=document.getelementbyid ("text");
var oli=odiv.getelementsbytagname ("Li");
var add_li=document.createelement ("Li");
var o_span=document.createelement ("span");
if (otext.value== "")
{
Alert ("Please fill in the message!") ");
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";
var Str=document.createtextnode (i+ "," +otext.value);
var strspan=document.createtextnode ("OK to delete" +i+ "," +otext.value+ "content?) ");
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++)
{
var m=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>
<body>
<div id= "Parent" >
<div id= "box" ><em> here will display the message content ......</em></div>
<input type= "text" id= "text" ><br/>
<input id= "btn" type= "button" onclick= "Fnsubmit ()" value= "post message"/>
</div>
<br/>
</body>
I hope this article will help you with your JavaScript programming.
