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 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
简述vue状态管理模式之vuex
Aug 29 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
jQuery实现增删改查
Dec 22 jQuery
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Node.js实现文件上传
2016/07/05 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python类如何定义私有变量
2020/02/03 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python openpyxl模块的使用详解
2021/02/25 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
职业生涯规划书范文
2014/03/10 职场文书
超市开店计划书
2014/04/26 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫