<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http:///1999/xhtml">
<head>
<title>JS+CSS emulates the message board function that can display content without refresh</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=("box");
var oem=("em")[0];
var otext=("text");
var oli=("li");
var add_li=("li");
var o_span=("span");
if(=="")
{
alert("Please fill in the message content!");
return;
}
="none";
o_span.="absolute";
o_span.="-20px";
o_span.="20px";
o_span.="#cccccc";
add_li.="relative";
add_li.index=i;
add_li.="#cccccc";
add_li.="20px";
var str=(i+"、"+);
var strspan=("Confirm to delete "+i+", "++" content?");
add_li.appendChild(o_span);
o_span.="none";
o_span.appendChild(strspan);
add_li.appendChild(str);
(add_li);
i++;
for(j=0;j<;j++)
{
var m=j;
oli[j].onmouseover=function()
{
="#ffff00";
((o_span)).="block";
<html xmlns="http:///1999/xhtml">
<head>
<title>JS+CSS emulates the message board function that can display content without refresh</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=("box");
var oem=("em")[0];
var otext=("text");
var oli=("li");
var add_li=("li");
var o_span=("span");
if(=="")
{
alert("Please fill in the message content!");
return;
}
="none";
o_span.="absolute";
o_span.="-20px";
o_span.="20px";
o_span.="#cccccc";
add_li.="relative";
add_li.index=i;
add_li.="#cccccc";
add_li.="20px";
var str=(i+"、"+);
var strspan=("Confirm to delete "+i+", "++" content?");
add_li.appendChild(o_span);
o_span.="none";
o_span.appendChild(strspan);
add_li.appendChild(str);
(add_li);
i++;
for(j=0;j<;j++)
{
var m=j;
oli[j].onmouseover=function()
{
="#ffff00";
((o_span)).="block";
};
oli[j].onmouseout=function()
{
="#cccccc";
((o_span)).="none";
};
oli[j].onclick=function()
{
m--;
(this);
if(m<0)
{
="block";
};
};
};
}
</script>
</head>
<body>
<div >
<h4>Message content:</h4>
<div ><em>The content of the message will be displayed here...</em></div>
<input type="text" ><br />
<input type="button" onclick="fnsubmit()" value="Post a message" />
</div>
<br />
</body>
</html>