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>

运行效果如下图所示:

JS+CSS模拟可以无刷新显示内容的留言板实例

希望本文所述对大家的javascript程序设计有所帮助。

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