JS+CSS模拟可以无刷新显示内容的留言板实例
作者：代码家园 时间：2024-04-19 10:17:13
本文实例讲述了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>
运行效果如下图所示：
希望本文所述对大家的javascript程序设计有所帮助。
标签：JS,CSS,留言板
0
投稿猜你喜欢
在PHP程序中运行Python脚本(接收数据及传参)的方法详解
2023-11-24 10:14:48
教你用Type Hint提高Python程序开发效率
2023-10-21 03:42:24
centos6.5安装python3.7.1之后无法使用pip的解决方案
2022-06-27 17:12:09
Python DPED机器学习之实现照片美化
2023-11-25 01:50:24
Golang函数这些神操作你知道哪些
2024-04-26 17:22:15
js传值后台中文出现乱码的解决方法
2024-02-25 11:52:23
Python异常之常见的Bug类型解决方法
2022-09-02 15:17:14
PHP join()函数用法与实例讲解
2023-06-02 00:39:19
Mysql数据库备份和还原常用的命令
2011-12-01 10:41:54
浅谈vue项目可以从哪些方面进行优化
2024-05-09 15:19:50
win2008 r2安装SQL SERVER 2008 R2 不能打开1433端口设置方法
2024-01-20 05:49:20
预防PHPDDOS的发包攻击别人的方法(iis+linux)
2023-10-14 04:09:34
VML模拟Rose画流程图代码
2008-09-02 10:58:00
python乱序字符串排序的实现方式
2023-08-02 12:14:59
详解MySQL下InnoDB引擎中的Memcached插件
2024-01-24 22:02:35
ThinkPHP实现将本地文件打包成zip下载
2024-05-11 09:48:29
解决os.path.isdir() 判断文件夹却返回false的问题
2022-11-07 18:11:37
php+highchats生成动态统计图
2024-05-02 17:19:08
利用JS打造黑客代码雨效果
2024-05-03 15:05:16
Python中的json对象与string相互转换教程
2022-11-08 04:38:58
