编程 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打印html内容功能的方法示例

Nov 28 Javascript

javascript无刷新评论实现方法

May 13 Javascript

JavaScript实现强制重定向至HTTPS页面

Jun 10 Javascript

js仿黑客帝国字母掉落效果代码分享

Nov 08 Javascript

JavaScript通过代码调用Flash显示的方法

Feb 02 Javascript

Bootstrap学习笔记之css样式设计(2)

Jun 07 Javascript

JS简单实现无缝滚动效果实例

Aug 24 Javascript

React 子组件向父组件传值的方法

Jul 24 Javascript

JQuery 又谈ajax局部刷新

Nov 27 jQuery

解决vue+ element ui 表单验证有值但验证失败问题

Jan 16 Javascript

在vue中使用Base64转码的案例

Aug 07 Javascript

vue界面发送表情的实现代码

Sep 11 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/10/09 PHP

php cookie 作用范围?不要在当前页面使用你的cookie

2009/03/24 PHP

PHP微框架Dispatch简介

2014/06/12 PHP

php判断文件上传类型及过滤不安全数据的方法

2014/12/17 PHP

初识ThinkPHP控制器

2016/04/07 PHP

PHP抽象类和接口用法实例详解

2019/07/20 PHP

关于viewport,Ext.panel和Ext.form.panel的关系

2009/05/07 Javascript

JS添加删除一组文本框并对输入信息加以验证判断其正确性

2013/04/11 Javascript

复制js对象方法(详解)

2013/07/08 Javascript

js实现iGoogleDivDrag模块拖动层拖动特效的方法

2015/03/04 Javascript

Bootstrap实现响应式导航栏效果

2015/12/28 Javascript

JS正则替换掉小括号及内容的方法

2016/11/29 Javascript

jQuery实现倒计时（倒计时年月日可自己输入）

2016/12/02 Javascript

jQuery图片切换动画效果

2017/02/28 Javascript

原生javascript上传图片带进度条【实例分享】

2017/04/06 Javascript

vue+webpack 打包文件 404 页面空白的解决方法

2018/02/28 Javascript

Vue filter介绍及详细使用

2018/04/04 Javascript

详解如何配置vue-cli3.0的vue.config.js

2018/08/23 Javascript

vue项目实现表单登录页保存账号和密码到cookie功能

2018/08/31 Javascript

Vue使用虚拟dom进行渲染view的方法

2019/12/26 Javascript

vue路由传参的基本实现方式小结【三种方式】

2020/02/05 Javascript

Python利用正则表达式实现计算器算法思路解析

2018/04/25 Python

详解pyqt5 动画在QThread线程中无法运行问题

2018/05/05 Python

Python for循环搭配else常见问题解决

2020/02/11 Python

Python数据正态性检验实现过程

2020/04/18 Python

Python爬取YY评级分数并保存数据实现过程解析

2020/06/01 Python

Python中的__init__作用是什么

2020/06/09 Python

10张动图学会python循环与递归问题

2021/02/06 Python

关于canvas.toDataURL 在iOS运行失败的问题解决

2020/09/16 HTML / CSS

工商管理毕业生推荐信

2013/12/24 职场文书

九年级化学教学反思

2014/01/28 职场文书

党员干部承诺书

2014/03/25 职场文书

群众路线剖析材料怎么写

2014/10/09 职场文书

2016五四青年节活动总结范文

2016/04/06 职场文书

Python合并pdf文件的工具

2021/07/01 Python

python使用torch随机初始化参数

2022/03/22 Python