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

锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

Mar 24 Javascript

JSON序列化与解析原生JS方法且IE6和chrome测试通过

Sep 05 Javascript

Jquery中基本选择器用法实例详解

May 18 Javascript

jQuery Validate验证框架经典大全

Sep 23 Javascript

浅谈javascript的闭包

Jan 23 Javascript

JS实现多物体运动的方法详解

Jan 23 Javascript

jQuery+Cookie实现切换皮肤功能【附源码下载】

Mar 25 jQuery

JS使用数组实现的队列功能示例

Mar 04 Javascript

从0到1搭建Element的后台框架的方法步骤

Apr 10 Javascript

Webpack设置环境变量的一些误区详解

Dec 19 Javascript

Vue程序化的事件监听器(实例方案详解)

Jan 07 Javascript

用React Native制作一个简单的游戏引擎

May 27 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中防止伪造跨站请求的小招式

2011/09/02 PHP

基于php设计模式中单例模式的应用分析

2013/05/15 PHP

解析PHP 使用curl提交json格式数据

2013/06/29 PHP

thinkphp使用literal防止模板标签被解析的方法

2014/11/22 PHP

PHP实现四种基础排序算法的运行时间比较(推荐)

2016/08/11 PHP

Thinkphp实现站点静态化的方法详解

2017/03/21 PHP

YII框架行为behaviors用法示例

2019/04/26 PHP

Yii2.0框架behaviors方法使用实例分析

2019/09/30 PHP

js操作textarea方法集合封装(兼容IE,firefox)

2011/02/22 Javascript

jQuery load方法用法集锦

2011/12/06 Javascript

JavaScript极简入门教程（三）：数组

2014/10/25 Javascript

jquery如何获取元素的滚动条高度等实现代码

2015/10/19 Javascript

跨域资源共享 CORS 详解

2016/04/26 Javascript

JS for...in 遍历语句用法实例分析

2016/08/24 Javascript

利用jquery实现下拉框的禁用与启用

2016/12/07 Javascript

JavaScript使用简单正则表达式的数据验证功能示例

2017/01/13 Javascript

element 中 el-menu 组件的无限极循环思路代码详解

2020/04/26 Javascript

vue打开新窗口并实现传参的图文实例

2021/03/04 Vue.js

python实现无证书加密解密实例

2014/10/27 Python

Python函数式编程指南（二）：从函数开始

2015/06/24 Python

详解Django+Uwsgi+Nginx的生产环境部署

2018/06/25 Python

Python面向对象之类的内置attr属性示例

2018/12/14 Python

python字典的setdefault的巧妙用法

2019/08/07 Python

python 求定积分和不定积分示例

2019/11/20 Python

Django 博客实现简单的全文搜索的示例代码

2020/02/17 Python

python实现PCA降维的示例详解

2020/02/24 Python

python实现逆滤波与维纳滤波示例

2020/02/26 Python

简单介绍HTML5中audio标签的使用

2015/09/24 HTML / CSS

英国定做窗帘和纺织品面料一站式商店：Dekoria

2018/08/29 全球购物

安德玛比利时官网：Under Armour比利时

2019/08/28 全球购物

电子信息毕业生自荐信

2013/11/16 职场文书

护理毕业生自荐信范文

2013/12/22 职场文书

财务会计专业自荐书

2014/06/30 职场文书

领导干部失职检讨书

2015/05/05 职场文书

消费者理赔投诉书

2015/07/02 职场文书

六年级作文之自救

2019/12/19 职场文书