核心产品
帮助中心
时间：2021-05-26
Js实现无刷新删除内容
<!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 = ""})}//格式化时间, 如果为一位数时补0function 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>以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码。分享给大家供大家参考。具体如下：这里演示JS仿腾讯微博无刷新删除效果，将显示在微博列表里的内容删除，运用
本文实例讲述了Laravel框架基于ajax和layer.js实现无刷新删除功能。分享给大家供大家参考，具体如下：1、首先要引入layer.js2、给删除按钮加
AjaxUpLoad.js的使用实现无刷新文件上传，如图1、创建页面并编写HTML上传文档:上传图片:2、引用AjaxUpload.js文件3、编写JS脚本wi
本文实例讲解了基于jquery实现表格无刷新分页功能，分享给大家供大家参考，具体内容如下效果图：具体代码：面向对象的无刷新表格分页vardata=[];for(
Ajax无刷新分页效果，如下代码实现Ajax无刷新分页效果functionshowpage(url){varxhr=newXMLHttpRequest();xh
