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 相关文章推荐
跨浏览器的事件对象介绍
Jun 27 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
webpack4 升级迁移的实现
Sep 12 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python常用数据分析模块原理解析
2020/07/20 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
非功能性需求都包括哪些方面
2013/10/29 面试题
体育学院毕业生自荐信
2013/11/03 职场文书
日语专业推荐信
2013/11/12 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
生日宴会主持词
2014/03/20 职场文书
社区活动策划方案
2014/08/21 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
典型事迹材料范文
2014/12/29 职场文书