Js实现无刷新删除内容


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>

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



相关阅读:
Win10 TH2正式版秋季更新内容曝光 共有十八处改进
ECMAScript6块级作用域及新变量声明(let)
Win10准正式版10240出现UAC窗口提示问题
最简单的Oracle数据恢复 select as of使用方法
苹果Mac查看硬盘是否开启ACHI模式的方法图解
php实现数组筛选奇数和偶数示例
谈一谈js中的执行环境及作用域
使用getBoundingClientRect方法实现简洁的sticky组件的方法
asp.net 图标提取以及图标转换的实例代码
Android App开发中Gradle构建过程的配置方法
jQuery中阻止冒泡事件的方法介绍
HTML5几个设计和修改的页面范例分享
.NET运行界面上,实现随意拖动控件的方法
用PHP提取中英文词语以及数字的首字母的方法介绍
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 外国现代诗歌大全 小学生现代诗歌大全 由“让部长通道更长些”所想到的 我眼中的课改生1200字 牛刀的名言 写对联 人生是要我们面对的,不是逃避的 校园孤独 墨下纸笺.了空. 护士求职信范文汇编 家乡的节日习俗作文 改错500字 制作圣诞帽作文100字 依栏听雨,问情几许 水果王国的比赛 小学一年级作文100字:(儿童诗)早上好 李皋试诗 每一天都是新的开始 要离开重庆了 励志人物:马云的第一桶金 基层财政工作者演讲稿 科技为生活添加了色彩 合肥的冬天 精灵鼠自述作文800字 我读懂了你作文 业务员月工作总结报告 逝雪葬花_伤感美文欣赏 2015四年级上学期班主任月工作小结 汉代的双休制 又一次想你 服装销售员年终总结 那些教会你撒娇的方法句子 我遇到了未来的我(三)作文700字 乡镇三基心得体会 《当片树叶挺好的》(3) 去少儿公园玩作文 一句话的感觉作文400字 小学六年级作文800字:面试 小学五年级作文550字:懊悔 念你心疼,会有一个人,他懂你 冰泪草——真爱在何方 祖国在强盛作文900字 (5)优罗莎回来了 【阮泊人诗歌】人生个个像月亮 社区世界癌症日活动总结 在浮沉中,编织一个美梦 美丽的错作文 爱护门前那条河1500字 游玩白水洋 打湿了眼睛的梦作文200字 2016爱情语录短句 情话

Copyright © 2016 phpStudy |