Js实现无刷新删除内容


Posted in Javascript onApril 29, 2015

Js实现无刷新删除内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿腾讯微博效果</title>
<style type="text/css">
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
#msgBox form{background:url() repeat-x 0 bottom;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#userName{height:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox form div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{background:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox .list .userName{display:inline;padding-right:5px;}
#msgBox .list .userName a{color:#2b4a78;}
#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .times span{float:left;}
#msgBox .list .times a{float:right;color:#889db6;display:none;}
.tr{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
</style>
<script type="text/javascript">
var get = {
byId: function(id) {
return typeof id === "string" ? document.getElementById(id) : id
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
/*-------------------------- +
事件绑定, 删除
+-------------------------- */
var EventUtil = {
addHandler: function (oElement, sEvent, fnHandler) {
oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler]


= function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
},
removeHandler: function (oElement, sEvent, fnHandler) {
oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
},
addLoadHandler: function (fnHandler) {
this.addHandler(window, "load", fnHandler)
}
};
/*-------------------------- +
设置css样式
读取css样式
+-------------------------- */
function css(obj, attr, value)
{
switch (arguments.length)
{
case 2:
if(typeof arguments[1] == "object")
{ 
for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
}
else
{ 
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
}
break;
case 3:
attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
break;
}
};


EventUtil.addLoadHandler(function ()
{
var oMsgBox = get.byId("msgBox");
var oUserName = get.byId("userName");
var oConBox = get.byId("conBox");
var oSendBtn = get.byId("sendBtn");
var oMaxNum = get.byClass("maxNum")[0];
var oCountTxt = get.byClass("countTxt")[0];
var oList = get.byClass("list")[0];
var oUl = get.byTagName("ul", oList)[0];
var aLi = get.byTagName("li", oList);
var aFtxt = get.byClass("f-text", oMsgBox);
var aImg = get.byTagName("img", get.byId("face"));
var bSend = false;
var timer = null;
var oTmp = "";
var i = 0;
var maxNum = 140;

//禁止表单提交
EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () {return false});

//为广播按钮绑定发送事件
EventUtil.addHandler(oSendBtn, "click", fnSend);

//为Ctrl+Enter快捷键绑定发送事件
EventUtil.addHandler(document, "keyup", function(event)
{
var event = event || window.event;
event.ctrlKey && event.keyCode == 13 && fnSend()
});

//发送广播函数
function fnSend ()
{
var reg = /^\s*$/g;
if(reg.test(oUserName.value))
{
alert("\u8bf7\u586b\u5199\u60a8\u7684\u59d3\u540d");
oUserName.focus()
}
else if(!/^[u4e00-\u9fa5\w]{2,8}$/g.test(oUserName.value))
{
alert("\u59d3\u540d\u75312-8\u4f4d\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u3001\u6c49\u5b57\u7ec4\u6210\uff01");
oUserName.focus()
}
else if(reg.test(oConBox.value))
{
alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");
oConBox.focus()
}
else if(!bSend)
{
alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");
oConBox.focus()
}
else
{
var oLi = document.createElement("li");
var oDate = new Date();
oLi.innerHTML = "<div class=\"userPic\"><img src=\"" + get.byClass("current", get.byId("face"))[0].src + "\"></div>\
<div class=\"content\">\
<div class=\"userName\"><a href=\"javascript:;\">" + oUserName.value + "</a>:</div>\
<div class=\"msgInfo\">" + oConBox.value.replace(/<[^>]*>| /ig, "") + "</div>\
<div class=\"times\"><span>" + format(oDate.getMonth() + 1) + "\u6708" + format(oDate.getDate()) +


"\u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes()) + "</span><a class=\"del\" href=\"javascript:;\">\u5220\u9664</a></div>\
</div>";
//插入元素
aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);

//重置表单
get.byTagName("form", oMsgBox)[0].reset();
for (i = 0; i < aImg.length; i++) aImg[i].className = "";
aImg[0].className = "current";

//将元素高度保存
var iHeight = oLi.clientHeight - parseFloat(css(oLi, "paddingTop")) - parseFloat(css(oLi, "paddingBottom"));
var alpah = count = 0;
css(oLi, {"opacity" : "0", "height" : "0"});

timer = setInterval(function ()
{
css(oLi, {"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
if (count > iHeight)
{
clearInterval(timer);
css(oLi, "height", iHeight + "px");
timer = setInterval(function ()
{
css(oLi, "opacity", (alpah += 10));
alpah > 100 && (clearInterval(timer), css(oLi, "opacity", 100))
},30)
}
},30);
//调用鼠标划过/离开样式
liHover();
//调用删除函数
delLi()
}
};

//事件绑定, 判断字符输入
EventUtil.addHandler(oConBox, "keyup", confine);

EventUtil.addHandler(oConBox, "focus", confine);
EventUtil.addHandler(oConBox, "change", confine);

//输入字符限制
function confine ()
{
var iLen = 0; 
for (i = 0; i < oConBox.value.length; i++) iLen += oConBox.value.charAt(i).charCodeAt() > 255 ? 1 : 0.5;
oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen));

maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "\u8fd8\u80fd\u8f93\u5165", bSend = true) : (css(oMaxNum, "color", "#f60"),


oCountTxt.innerHTML = "\u5df2\u8d85\u51fa", bSend = false)
}
//加载即调用
confine();

//广播按钮鼠标划过样式
EventUtil.addHandler(oSendBtn, "mouseover", function () {this.className = "hover"});


//广播按钮鼠标离开样式
EventUtil.addHandler(oSendBtn, "mouseout", function () {this.className = ""});

//li鼠标划过/离开处理函数
function liHover()
{
for (i = 0; i < aLi.length; i++)
{
//li鼠标划过样式
EventUtil.addHandler(aLi[i], "mouseover", function (event)
{
this.className = "hover";
oTmp = get.byClass("times", this)[0];
var aA = get.byTagName("a", oTmp);
if (!aA.length)
{
var oA = document.createElement("a");

oA.innerHTML = "删除";
oA.className = "del";
oA.href = "javascript:;";
oTmp.appendChild(oA)
}
else
{
aA[0].style.display = "block";
}
});


//li鼠标离开样式
EventUtil.addHandler(aLi[i], "mouseout", function ()
{
this.className = "";
var oA = get.byTagName("a", get.byClass("times", this)[0])[0];
oA.style.display = "none"

})
}
}
liHover();

//删除功能
function delLi()
{
var aA = get.byClass("del", oUl);

for (i = 0; i < aA.length; i++)
{
aA[i].onclick = function ()
{
var oParent = this.parentNode.parentNode.parentNode;
var alpha = 100;
var iHeight = oParent.offsetHeight;
timer = setInterval(function ()
{
css(oParent, "opacity", (alpha -= 10));
if (alpha < 0)
{
clearInterval(timer);

timer = setInterval(function ()
{
iHeight -= 10;
iHeight < 0 && (iHeight = 0);
css(oParent, "height", iHeight + "px");
iHeight == 0 && (clearInterval(timer), oUl.removeChild(oParent))
},30)
} 
},30); 
this.onclick = null

} 
}
}
delLi();

//输入框获取焦点时样式
for (i = 0; i < aFtxt.length; i++)
{
EventUtil.addHandler(aFtxt[i], "focus", function ()
{this.className = "active"}); 
EventUtil.addHandler(aFtxt[i], "blur", function () {this.className = ""})
}

//格式化时间, 如果为一位数时补0
function format(str)
{
return str.toString().replace(/^(\d)$/,"0$1")
}

//头像
for (i = 0; i < aImg.length; i++)
{
aImg[i].onmouseover = function ()
{
this.className += " hover"
};
aImg[i].onmouseout = function ()
{
this.className = this.className.replace(/\s?hover/,"")
};
aImg[i].onclick = function ()
{
for (i = 0; i < aImg.length; i++) aImg[i].className = "";
this.className = "current"

}
}
});
</script>
</head>


<body>
<div id="msgBox">
<form>
<h2>来 , 说说你在做什么 , 想什么</h2>
<div>
<input id="userName" class="f-text" value="" />
<p id="face"><img src="face1.gif" class="current" /><img src="face2.gif" /><img src="face1.gif" /><img src="face2.gif" /></p>
</div>
<div><input id="conBox" class="f-text"></div>
<div class="tr">
<p>
<span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
<input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />
</p>
</div>
</form>
<div class="list">
<h3><span>大家在说</span></h3>
<ul>
<li>
<div class="userPic"><img src="face.gif" /></div>
<div class="content">
<div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
<div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>
<div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;">删除</a></div>
</div>
</li>
<li>
<div class="userPic"><img src="face.gif" /></div>
<div class="content">
<div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
<div class="msgInfo">新增选择头像功能。</div>
<div class="times"><span>07月05日 12:08</span><a class="del" href="javascript:;">删除</a></div>
</div>
</li>
<li>
<div class="userPic"><img src="face.gif" /></div>
<div class="content">
<div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
<div class="msgInfo">增加了记录广播时间的功能。</div>
<div class="times"><span>07月04日 16:55</span><a class="del" href="javascript:;">删除</a></div>
</div>
</li>
</ul>
</div> 
</div>
</body>
</html>

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 #Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 #Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 #Javascript
javascript中in运算符用法分析
Apr 28 #Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 #Javascript
chrome不支持form.submit的解决方案
Apr 28 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python进程间通信之共享内存详解
2017/10/30 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python 格式化输出百分号的方法
2019/01/20 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
详解Django中异步任务之django-celery
2020/11/05 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
白酒市场开发计划书
2014/01/09 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
土建施工员岗位职责
2014/07/16 职场文书
音乐学专业求职信
2014/07/22 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python