编程 Javascript

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

Posted in Javascript onMarch 03, 2015

本文实例讲述了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模拟可以无刷新显示内容的留言板实例

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解放web程序员的输入验证

Oct 06 Javascript

返回对象在当前级别中是第几个元素的实现代码

Jan 20 Javascript

判断一个变量是数组Array类型的方法

Sep 16 Javascript

javascript中的变量作用域以及变量提升详细介绍

Oct 24 Javascript

jquery实现滑动图片自己测试的例子

Nov 05 Javascript

JS实现5秒钟自动封锁div层的方法

Feb 20 Javascript

Javascript刷新窗口方法小结

Oct 21 Javascript

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

Oct 26 Javascript

用node和express连接mysql实现登录注册的实现代码

Jul 05 Javascript

详解React+Koa实现服务端渲染(SSR)

May 23 Javascript

解决angularjs WdatePicker ng-model的问题

Sep 13 Javascript

vue 集成 vis-network 实现网络拓扑图的方法

Aug 07 Javascript

JavaScript跨浏览器获取页面中相同class节点的方法

Mar 03 #Javascript

JS实现鼠标点击展开或隐藏表格行的方法

Mar 03 #Javascript

浅谈JavaScript数据类型

Mar 03 #Javascript

JavaScript中property和attribute的区别详细介绍

Mar 03 #Javascript

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

Mar 02 #Javascript

JS上传图片前实现图片预览效果的方法

Mar 02 #Javascript

JS控制弹出新页面窗口位置和大小的方法

Mar 02 #Javascript

You might like

php中strstr、strrchr、substr、stristr四个函数的区别总结

2014/09/22 PHP

PHP应用跨时区功能的实现方法

2019/03/21 PHP

Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例

2019/10/11 PHP

jQuery源码分析之Event事件分析

2010/06/07 Javascript

使用jquery动态加载javascript以减少服务器压力

2012/10/29 Javascript

jquery中prop()方法和attr()方法的区别浅析

2013/09/06 Javascript

jQery使网页在显示器上居中显示适用于任何分辨率

2014/06/09 Javascript

基于NodeJS的前后端分离的思考与实践（一）全栈式开发

2014/09/26 NodeJs

jquery搜索框效果实现方法

2015/01/16 Javascript

JS弹出可拖拽可关闭的div层完整实例

2015/02/13 Javascript

javascript实现点击后变换按钮显示文字的方法

2015/05/13 Javascript

浅谈javascript运算符——条件,逗号,赋值,()和void运算符

2016/07/15 Javascript

js实现的光标位置工具函数示例

2016/10/03 Javascript

什么是JavaScript中的结果值?

2016/10/08 Javascript

简单实现js浮动框

2016/12/13 Javascript

使用Bootstrap美化按钮实例代码(demo)

2017/02/03 Javascript

Vue 短信验证码组件开发详解

2017/02/14 Javascript

JS实现的JSON数组去重算法示例

2018/04/11 Javascript

js中实例与对象的区别讲解

2019/01/21 Javascript

浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

2019/09/10 Javascript

Python translator使用实例

2008/09/06 Python

python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解

2017/11/08 Python

Python实现简易Web爬虫详解

2018/01/03 Python

Python绘制的二项分布概率图示例

2018/08/22 Python

Python中的random.uniform()函数教程与实例解析

2019/03/02 Python

python实现一行输入多个值和一行输出多个值的例子

2019/07/16 Python

Python实现的企业粉丝抽奖功能示例

2019/07/26 Python

Shopee印度尼西亚：东南亚与台湾市场最大电商平台

2018/06/17 全球购物

宗教学大学生职业生涯规划范文

2014/02/08 职场文书

2014道德模范事迹材料

2014/02/16 职场文书

副总经理岗位职责

2014/03/16 职场文书

医生爱岗敬业演讲稿

2014/08/26 职场文书

领导干部贪图享乐整改措施

2014/09/21 职场文书

简单租房协议书（范本）

2014/10/13 职场文书

2015最新民情日记范文

2015/06/26 职场文书

python元组打包和解包过程详解

2021/08/02 Python