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

setInterval 和 setTimeout会产生内存溢出

Feb 15 Javascript

javascript 流畅动画实现原理

Sep 08 Javascript

Mootools 1.2教程设置和获取样式表属性

Sep 15 Javascript

页面中iframe相互传值传参

Dec 13 Javascript

javascript 中__proto__和prototype详解

Nov 25 Javascript

JQuery中Bind()事件用法分析

May 05 Javascript

Javascript中Date类型和Math类型详解

Feb 27 Javascript

jquery css实现邮箱自动补全

Nov 14 Javascript

详解Vue路由History mode模式中页面无法渲染的原因及解决

Sep 28 Javascript

js操作table中tr的顺序实现上移下移一行的效果

Nov 22 Javascript

Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

Oct 28 Javascript

原生js实现弹窗消息动画

Nov 20 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 模板高级篇总结

2006/12/21 PHP

用php将任何格式视频转为flv的代码

2009/09/03 PHP

c#中的实现php中的preg_replace

2009/12/21 PHP

php入门学习知识点六 PHP文件的读写操作代码

2011/07/14 PHP

一个简单的网站访问JS计数器刷新1次加1次访问

2012/09/20 Javascript

当jQuery1.7遇上focus方法的问题

2014/01/26 Javascript

JavaScript中的Primitive对象封装介绍

2014/12/31 Javascript

JQuery球队选择实例

2015/05/18 Javascript

Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）

2016/06/22 Javascript

js验证真实姓名与身份证号,手机号的简单实例

2016/07/18 Javascript

JavaScript表单焦点自动切换代码

2016/07/24 Javascript

AngularJS基础 ng-focus 指令简单示例

2016/08/01 Javascript

js常用的继承--组合式继承

2017/03/06 Javascript

Vue 组件间的样式冲突污染

2017/08/31 Javascript

Vue项目查看当前使用的elementUI版本的方法

2018/09/27 Javascript

JS/HTML5游戏常用算法之碰撞检测像素检测算法实例详解

2018/12/12 Javascript

Vue+Element实现动态生成新表单并添加验证功能

2019/05/23 Javascript

JavaScript 面向对象基础简单示例

2019/10/02 Javascript

js布局实现单选按钮控件

2020/01/17 Javascript

使用python实现正则匹配检索远端FTP目录下的文件

2015/03/25 Python

Python如何处理大数据？3个技巧效率提升攻略（推荐）

2019/04/15 Python

python基于opencv检测程序运行效率

2019/12/28 Python

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

2020/02/17 Python

HTML5的结构和语义(5):交互

2008/10/17 HTML / CSS

Html5 canvas实现粒子时钟的示例代码

2018/09/06 HTML / CSS

Revolution Beauty美国官网：英国知名化妆品网站

2018/07/23 全球购物

意大利灯具购物网站：Lampade.it

2018/10/18 全球购物

经济实惠的豪华家具：My-Furniture

2019/03/12 全球购物

VLAN和VPN有什么区别？分别实现在OSI的第几层？

2014/12/23 面试题

override和overload的区别

2016/03/09 面试题

幼儿园中班上学期评语

2014/04/18 职场文书

音乐幼师求职信

2014/07/09 职场文书

群众路线教育实践活动批评与自我批评

2014/09/15 职场文书

公务员上班玩游戏检讨书

2014/09/17 职场文书

高中语文教学反思范文

2016/02/16 职场文书

Django实现翻页的示例代码

2021/05/24 Python