编程 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 相关文章推荐

JavaScript语句可以不以;结尾的烦恼

Mar 08 Javascript

JQUERY获取form表单值的代码

Jul 17 Javascript

关于extjs treepanel复选框选中父节点与子节点的问题

Apr 02 Javascript

JavaScript 模拟类机制及私有变量的方法及思路

Jul 10 Javascript

HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

Nov 25 Javascript

jQuery实现简单的网页换肤效果示例

Sep 18 Javascript

Node.js复制文件的方法示例

Dec 29 Javascript

ionic App问题总结系列之ionic点击系统返回键退出App

Aug 19 Javascript

Angular4实现鼠标悬停3d倾斜效果

Oct 25 Javascript

基于React+Redux的SSR实现方法

Jul 03 Javascript

前端防止用户重复提交js实现代码示例

Sep 07 Javascript

关于layui的动态图标不显示的解决方法

Sep 04 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运行模式的深入理解

2013/06/03 PHP

php中sql注入漏洞示例 sql注入漏洞修复

2014/01/24 PHP

完美实现wordpress禁止文章修订和自动保存的方法

2014/11/03 PHP

php循环table实现一行两列显示的方法

2015/06/04 PHP

PHP批量去除BOM头内容信息代码

2016/03/11 PHP

网站上面有这种切换效果

2006/06/26 Javascript

Javascript学习笔记6 prototype的提出

2010/01/11 Javascript

js getBoundingClientRect() 来获取页面元素的位置

2010/11/25 Javascript

Extjs4 GridPanel的主要配置参数详细介绍

2013/04/18 Javascript

Javascript selection的兼容性写法介绍

2013/12/20 Javascript

浅谈javascript中遇到的字符串对象处理

2016/11/18 Javascript

JavaScript 中对象的深拷贝

2016/12/04 Javascript

详解js的事件处理函数和动态创建html标记方法

2016/12/16 Javascript

JS实现根据密码长度显示安全条功能

2017/03/08 Javascript

详解如何在React组件“外”使用父组件的Props

2018/01/12 Javascript

jquery获取select选中值的文本,并赋值给另一个输入框的方法

2018/08/21 jQuery

小程序点赞收藏功能的实现代码示例

2018/09/07 Javascript

如何在JavaScript中谨慎使用代码注释

2019/06/21 Javascript

javascript使用Blob对象实现的下载文件操作示例

2020/04/18 Javascript

[44:40]2018DOTA2亚洲邀请赛3月30日小组赛A组Liquid VS OG

2018/03/31 DOTA

python3中函数参数的四种简单用法

2018/07/09 Python

python实现图片上添加图片

2019/11/26 Python

基于pytorch 预训练的词向量用法详解

2020/01/06 Python

使用 Python 读取电子表格中的数据实例详解

2020/04/17 Python

python用Tkinter做自己的中文代码编辑器

2020/09/07 Python

Python操控mysql批量插入数据的实现方法

2020/10/27 Python

python如何编写类似nmap的扫描工具

2020/11/06 Python

为什么要有struct关键字

2012/05/08 面试题

介绍下Lucene建立索引的过程

2016/03/02 面试题

电力公司个人求职信范文

2014/02/04 职场文书

前处理组长岗位职责

2014/03/01 职场文书

人力资源管理专业应届生求职信

2014/04/24 职场文书

画展邀请函

2015/01/31 职场文书

投标邀请书范本

2015/02/02 职场文书

Nginx禁止ip访问或非法域名访问

2022/04/07 Servers

浅谈Redis缓冲区机制

2022/06/05 Redis