DDR爱好者之家

JS+CSS模拟可以无刷新显示内容的留言板实例
站长资源 2025/1/19 佚名
42 1538
DDR爱好者之家 Design By 杰米

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

复制代码 代码如下:<!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模拟可以无刷新显示内容的留言板功能</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("请填写留言内容！");
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("确定删除"+i+"、"+otext.value+"内容？");
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>留言内容：</h4>
<div id="box"><em>这里会显示留言内容……</em></div>
<input type="text" id="text"><br />
<input id="btn" type="button" onclick="fnsubmit()" value="发表留言" />
</div>
<br />
</body>
</html>

运行效果如下图所示：

JS+CSS模拟可以无刷新显示内容的留言板实例

希望本文所述对大家的javascript程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米