JS实现仿腾讯微博无刷新删除微博效果代码
本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码。分享给大家供大家参考。具体如下：
这里演示JS仿腾讯微博无刷新删除效果，将显示在微博列表里的内容删除，运用AJAX技术，无刷新删除微博的内容，参考性强，希望对初学AJAX的朋友有所帮助。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.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程序设计有所帮助。
相关推荐
-
JavaScript URL参数读取改进版
下面是我们一直也在用的几种方法 复制代码 代码如下: <script language="javascript" type="text/javascript"> function request(paras){ var url = location.href; var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");
-
javascript实现的仿腾讯QQ窗口抖动效果代码
振动 function zd(u){ var a=['top','left'],b=0; u=setInterval(function(){ document.getElementById('win').style[a[b%2]]=(b++)%415){clearInterval(u);b=0} },32) } 欢迎访问我们,www.jb51.net [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js修改地址栏URL参数解决url参数问题
现在做网页,经常会碰到处理地址栏参数的问题,但一直是凭感觉做,之后漏洞百出也不知道从哪改起,因此,就专门做了一个修改地址栏参数的方法,这一下,就再也不用愁啦,哈哈! 以下就是我编的方法,使用很简单的哦: 复制代码 代码如下: function changeURLPar(destiny, par, par_value) { var pattern = par+'=([^&]*)'; var replaceText = par+'='+par_value; if (destiny.match(pat
-
javascript 获取url参数的正则表达式(用来获取某个参数值)
例子: //javascript传参数(多个) var url = "B.aspx?txtA="+document.getElementById("txtName").value; url +="&txtB="+document.getElementById("txtAge").value; window.open(url,'xWindow','width=640,height=400,status=no,toolba
-
JS URL传中文参数引发的乱码问题
解决方法如下: 1.在JS里对中文参数进行两次转码 复制代码 代码如下: var login_name = document.getElementById("loginname").value; login_name = encodeURI(login_name); login_name = encodeURI(login_name); 2.在服务器端对参数进行解码 复制代码 代码如下: String loginName = ParamUtil.getString(request, &
-
JS获取URL中参数值（QueryString）的4种方法分享
方法一:正则法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null;}/
-
JavaScript Base64编码和解码，实现URL参数传递。
为什么需要对参数进行编码?相信有过开发的经验的广大程序员都知道,在Web中,若是直接在Url地址上传递参数值,若是中文,或者+等什么的就会出现乱码现象,若是数字或者英文的好象没有什么问题,简言之,传递过来的参数是需要进行编码的.在这里,也许有人会说,为什么不直接用Server.UrlDecode和Server.UrlEncode这两个来进行编码和解码的操作呢? 的确,这两个服务器端对象很好使用,用起来也很方便,但是,若在客户端是HTML的Input,查询的时候页面是HTML或者其他的,反正不是.
-
JS 仿腾讯发表微博的效果代码
最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery那种形式?我当时回答的是:每个人编写代码有每个人的习惯.但是我更想表达的是:这种编码个人觉得 有一个很大的优点,我不是非常依赖于Jquery框架,因为不同的公司有不同的框架 比如在淘宝用的kissy框架 在支付宝用的是支付宝框架 在百度用的是百度框架 在腾讯有腾讯的前端js框架 假如我的编写代码太依赖于jquery 那假如其他
-
js获取url中的参数且参数为中文时通过js解码
如果传递的参数是: 复制代码 代码如下: <a href="${pageContext.request.contextPath}/productdisplay/productDisplay_productDisplayUI.action?pkId=${pkId}&name=${name}" style="color:white; margin-top:10px; margin-bottom:10px;">${name}</a> 获取u
-
在JavaScript中获取请求的URL参数
当然我们可以在后台中获取参数的值,然后在前台js代码中获取变量的值,具体做法请参考我的这篇文章:JavaScript获取后台C#变量以及调用后台方法. 其实我们也可以直接在js中获取请求的参数的值,通过使用window.location.search可以获取到当前URL的?号开始的字符串,如前面的链接获取到的search为?id=001.再对获取的字符串进行处理,就可以获取到参数的值了. 复制代码 代码如下: function getUrlParam(name) { var reg = new
-
js实现将选中内容分享到新浪或腾讯微博
微博如火如荼,大家都选择用微博带来社会化流量,顺便推广产品和网站,几乎所有的网站都有分享到代码,但是还有一种更快捷的分享方式,javascript就可以实现将选定内容轻松分享到新浪微博和腾讯微博,效果图如下: 将选中的内容分享到新浪微博,腾讯微博实现js代码如下: <STYLE> .img_sina_share { DISPLAY: none; CURSOR: pointer; POSITION: absolute } .img_qq_share { DISPLAY: none; CURSOR
-
js URL参数的拼接方法比较
最常见的方式就是: 复制代码 代码如下: url?arg1=value1&arg2=value2&arg3=value3... 这样的方式最常见最普通也最容易理解,但是在项目中,如果后面带的参数可变而且字段有不同的值或者不同的语义时,这样的方式可维护性和可读性其实并不高,而且代码也容易重复或者冗余. 比如下面的一个对CGI的请求串: 复制代码 代码如下: var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?"; var
-
javascript/jquery获取地址栏url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 复制代码 代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情 首先看看单纯的通过javascript是如何来获取url中的某个参数 复制代码 代码如下: function
-
js获取腾讯视频ID的方法
本文实例讲述了js获取腾讯视频ID的方法.分享给大家供大家参考,具体如下: 使用js截取腾讯视频的ID需要知道地址规则,只有知道了规则才可以获得到了. 做项目时候遇到添加视频的问题,比如用户复制腾讯视频的链接,以这个为例(http://v.qq.com/x/cover/ypdy6korrry8w5a/u0332wyg5oa.html) 现在需要截取.html前面以及最后一个斜杠后面的内容(u0332wyg5oa);腾讯视频点击下面分享时会出现这样一段代码: 复制代码 代码如下: <iframe
-
js获取url参数值的两种方式
方法一:正则分析法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return n