核心产品
帮助中心
时间：2021-05-26
本文实例讲述了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://putedStyle(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程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现仿腾讯微博滑出效果报告每日天气的方法。分享给大家供大家参考。具体分析如下：这是仿腾讯微博滑出效果的每日天气代码，鼠标放上去，天气内
本文实例为大家分享了js仿新浪微博消息发布的具体代码，供大家参考，具体内容如下仿新浪微博消息发布功能*{margin:0;padding:0;}#div1{wi
本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下：这是一款jQuery实现的仿新浪微博新消息提示框效果，支持智能浮动定位
本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码。分享给大家供大家参考。具体如下：这是一款新浪微博效果的弹出框，现成的JS代码，兼容IE6+，以及各主流浏
本文实例讲述了jquery实现仿新浪微博评论滚动效果。分享给大家供大家参考。具体如下：这里使用jquery实现评论滚动效果，仿新浪微博大厅文字滚动效果，以前有不
