JS+CSS模拟的留言板功能

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>模拟留言板</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: 100%; 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>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS+CSS模拟的留言板功能

分类

网站常用

描述

JS+CSS模拟的留言板功能，在指定位置发表留言，可在当前页无刷新显示留言内容，实际上是利用JS的各种方法，将网页中的指定元素赋值，从而显示留言来实现。并不具备动态保存留言的功能。