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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
JSON取值前判断
Dec 23 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
js获取图片的base64编码并压缩
Dec 05 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 debug 安装技巧
2011/04/30 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python清除指定目录内所有文件中script的方法
2015/06/30 Python
使用Python对MySQL数据操作
2017/04/06 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
金融专业推荐信
2013/11/14 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
通用自荐信范文
2014/03/14 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers