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通用函数
May 09 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
如何利用node转发请求详解
Sep 17 Javascript
使用Vant完成Dialog弹框案例
Nov 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实现快速排序法函数代码
2012/08/27 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
代码生成器 document.write()
2007/04/15 Javascript
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
深入理解python中的闭包和装饰器
2016/06/12 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python配置文件处理的方法教程
2019/08/29 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
筑梦中国心得体会
2016/01/18 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js