JS + CSS simulate a message board instance that can display content without refreshing the content
This article describes how to simulate a message board with javascript + CSS that can display content without refreshing the content. It involves javascript dom elements, mouse events, and css styles. For more information, see
This article describes how to simulate the message board function of JS + CSS to display content without refreshing new content. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // h2D XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> JS + CSS simulation of the message board function that allows you to refresh the displayed content </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 ("Enter the message content! ");
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 ("are you sure you want 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>
</Head>
<Body>
<Div id = "parent">
<H4> message content: <Div id = "box"> <em> the message content is displayed here ...... </Em> </div>
<Input type = "text" id = "text"> <br/>
<Input id = "btn" type = "button" onclick = "fnsubmit ()" value = "post message"/>
</Div>
<Br/>
</Body>
</Html>
Shows the running effect:
I hope this article will help you design javascript programs.