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 交通频道 作文范文 2016年度述职报告开头语和结尾语 My Class_关于介绍我的班级英语作文 经典语录:人生活的是经历,幸福总是在路上 班级趣事作文900字 2016成人宣誓仪式议程与主持词 喜欢的歌静静听,喜欢的人远远看 隋朝故事:隋文帝杨坚的反腐奇招 新年祝福语:春节给客户的贺词精选 坐而言不如起而行 花焉花开人已不在 基层党建工作年终总结 次第温情作文900字 老师促我成长 大学生党支部工作总结范文 大学生争取入党的基本条件 春节同学聚会邀请函 工会干部2015严以用权心得体会 忘情醉作文200字 妈妈最开心的一天11200字 描述怀念过去的句子 耳目造句 小学五年级作文500字:校园处处有花香 团队总结范文 05年组织人事工作总结 声声入耳不必事事关心 初中初一作文700字:桃花依旧笑春风 乡镇计生站工作总结 大灰狼和迷路的孩子 春日登楼野望·凭轩聊一望 贺铸《忆仙姿·莲叶初生南浦》宋词鉴赏 玩具小河马作文500字 露齿的微笑 忠诚的约翰涅斯 月亮出来了作文200字 值得尊敬的一个人 3月精品学雷锋活动方案 上帝没有双眼作文200字 为梦想远航演讲稿 春节正月初二祭财神习俗及有关财神的传说 亲亲的在耳边说Love你 或许曾经 或许很远 在一个寒冷的冬天 优化我县经济发展环境调研报告 寂静山林作文600字 用乐观的态度对待人生 爱情从来不是一个人的事 学生会第四季度工作总结 清明,回家 真是一个惊喜700字 美人醉

Copyright © 2016 phpStudy |