JS实现仿腾讯微博无刷新删除微博效果代码
本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码。分享给大家供大家参考。具体如下：
这里演示JS仿腾讯微博无刷新删除效果，将显示在微博列表里的内容删除，运用AJAX技术，无刷新删除微博的内容，参考性强，希望对初学AJAX的朋友有所帮助。
运行效果截图如下：
在线演示地址如下：
http://demo.phpstudy.net/js/2015/js-f-sina-web-ajax-del-info-demo/
具体代码如下：
<!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>
<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=\"images/face1.gif\" class=\"current\" /><img src=\"images/face2.gif\" /><img src=\"images/face1.gif\" /><img src=\"images/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=\"images/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=\"images/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=\"images/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程序设计有所帮助。
本文地址：https://www.stayed.cn/item/3681
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)