JS+CSS模拟可以无刷新显示内容的留言板实例
更新时间：2015年03月03日 09:32:38 作者：代码家园
这篇文章主要介绍了JS+CSS模拟可以无刷新显示内容的留言板,涉及javascript操作dom元素、鼠标事件及css样式的技巧,需要的朋友可以参考下
本文实例讲述了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";
<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>
运行效果如下图所示：
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
关于Lodop打印是个很牛的打印插件,但是打印Bootstrap的样式的时候就容易错乱,下面通过本文给大家分享下这方面的问题2016-12-12
这篇文章主要为大家介绍了uni-app h5端在jenkins构建报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作技巧,需要的朋友可以参考下2017-09-09
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
这篇文章主要介绍了JavaScript求一个数组中重复出现次数最多的元素及其下标位置,涉及javascript数组元素遍历、判断、正则过滤、追加等相关操作技巧,需要的朋友可以参考下2018-07-07
JavaScript中valueOf函数与toString方法深入理解
基本上，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍，有需要的朋友可以参考下2012-12-12
这篇文章主要为大家详细介绍了微信小程序实现授权登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
判断用户是否在线的代码，需要的朋友可以参考下。2011-03-03
JavaScript中数组slice和splice的对比小结
相信对很多学习JavaScript语言的人来说，都会经常搞不清slice和splice这两个方法。它们虽然名称相似，但是功能却完全不同。所以这篇文章就给大家详细整理了关于JavaScript中数组slice和splice的对比，有需要的可以参考学习。2016-09-09
js处理json格式的插入、修改、删除，以及字符串的比较等常用操作，下面有五个示例，感兴趣的朋友可以学习下2013-09-09
这篇文章主要介绍了基于JS实现table导出Excel并保留样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
最新评论