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

JS获取html对象的几种方式介绍

Dec 05 Javascript

JQuery解析HTML、JSON和XML实例详解

Mar 29 Javascript

JS在一定时间内跳转页面及各种刷新页面的实现方法

May 26 Javascript

jQuery 跨域访问解决原理案例详解

Jul 09 Javascript

详解Vue 中 extend 、component 、mixins 、extends 的区别

Dec 20 Javascript

vue cli升级webapck4总结

Apr 04 Javascript

Vue拖拽组件开发实例详解

May 11 Javascript

详解Node.js一行命令上传本地文件到服务器

Apr 22 Javascript

vue-cli配置flexible过程详解

Jul 04 Javascript

Layui表格行工具事件与数据回填方法

Sep 13 Javascript

JQuery发送ajax请求时中文乱码问题解决

Nov 14 jQuery

在react项目中使用antd的form组件,动态设置input框的值

Oct 24 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

CI框架自动加载session出现报错的解决办法

2014/06/17 PHP

PHP语法自动检查的Vim插件

2014/08/11 PHP

用javascript控制iframe滚动的代码

2007/04/10 Javascript

JS 屏蔽键盘不可用与鼠标右键不可用的方法

2013/11/18 Javascript

js简单实现根据身份证号码识别性别年龄生日

2013/11/29 Javascript

基于JavaScript实现移动端TAB触屏切换效果

2015/10/20 Javascript

js鼠标点击图片切换效果实现代码

2015/11/19 Javascript

基于JavaScript实现弹出框效果

2016/02/19 Javascript

js变量提升深入理解

2016/09/16 Javascript

Query常用DIV操作获取和设置长度宽度的实现方法

2016/09/19 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

2016/12/08 Javascript

深究AngularJS中ng-drag、ng-drop的用法

2017/06/12 Javascript

vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

2018/10/31 Javascript

layui添加动态菜单与选项卡

2019/07/26 Javascript

vue canvas绘制矩形并解决由clearRec带来的闪屏问题

2019/09/02 Javascript

vue 解决computed修改data数据的问题

2019/11/06 Javascript

微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

2019/12/17 Javascript

vue 实现把路由单独分离出来

2020/08/13 Javascript

[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

Python实现求两个csv文件交集的方法

2017/09/06 Python

Python数据结构之双向链表的定义与使用方法示例

2018/01/16 Python

对pandas中to_dict的用法详解

2018/06/05 Python

python dataframe向下向上填充,fillna和ffill的方法

2018/11/28 Python

DES加密解密算法之python实现版(图文并茂)

2018/12/06 Python

python爬虫之urllib,伪装,超时设置,异常处理的方法

2018/12/19 Python

Python enumerate函数功能与用法示例

2019/03/01 Python

详解python爬虫系列之初识爬虫

2019/04/06 Python

Python操作多维数组输出和矩阵运算示例

2019/11/28 Python

python3实现飞机大战

2020/11/29 Python

韩国三星集团旗下时尚品牌官网：SSF SHOP

2016/08/02 全球购物

教育专业个人求职信

2013/12/02 职场文书

办护照工作证明范本

2014/01/14 职场文书

新手上路标语

2014/06/20 职场文书

离婚协议书怎么写（范本参考）

2014/09/30 职场文书

Javascript的promise,async和await的区别详解

2022/03/24 Javascript

MySQL 执行数据库更新update操作的时候数据库卡死了

2022/05/02 MySQL