这里演示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="data:images/face1.gif" class="current" /><img src="data:images/face2.gif" /><img src="data:images/face1.gif" /><img src="data: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="data: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="data: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="data: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>

出处： https://www.jb51.net/article/73484.htm

笔记：

* 在事件绑定中用了一句 (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))

排列开是  （ oElement["_" + sEvent + fnHandler] = fnHandler,
                     oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, 
                     oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler])
                  )
在上一篇中，这一句是 oElement.attachEvent("on" + sEvent, fnHandler)

不明白为什么要化简为繁，如果不考虑数组在别的地方会使用的话，上面的代码可以简化为：

oElement.attachEvent("on" + sEvent, function () {fnHandler()}) 这样貌似与上篇并无一二呀

试实了一下，结果一样

var fnHan = function(){console.log(123)}

function logg(f){f();}

logg(fnHan);                     //

logg(function(){fnHan();});      //

JS实现仿腾讯微博无刷新删除微博效果代码的更多相关文章

  1. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  2. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  3. 无刷新删除 Ajax,JQuery

    1.数据库用上面的,增加一个 DeleteById 的SQL方法 delete from T_Posts where Id = @Original_Id 2.设置处理页面 delete.ashx pu ...

  4. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  5. Ajax：后台jquery实现ajax无刷新删除数据及demo

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8

  6. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  7. jQuery无刷新分页完整实例代码

    在线演示地址如下: http://demo.jb51.net/js/2015/jquery-wsx-page-style-demo/ <!DOCTYPE html> <head> ...

  8. ajax无刷新删除、复制 THINKPHP

    一.jquery 代码: <SCRIPT LANGUAGE=javascript> function delGoods(goodsID) {      if(confirm( " ...

  9. js实现无刷新上传

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...

随机推荐

  1. [实战]MVC5+EF6+MySql企业网盘实战(2)——验证码

    写在前面 断断续续,今天算是把验证码的东东弄出来了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5 ...

  2. Zabbix忘记登录密码重置

    Zabbix忘记登录密码了 登录MySQL查看用户 select * from users\G 重置密码 mysql> use zabbix; mysql> update users se ...

  3. ZOJ 3985 - String of CCPC - [字符串处理]

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3985 题意: 给出一个长度为n的字符串,全部由'C'和'P'组成 ...

  4. Django模板变量的使用

    在views.py中进行逻辑控制,编写向跳转页面传递内容的代码.可以看出,对类.字典.列表中的数据均可操作.views.py的内容如下: from django.shortcuts import re ...

  5. python数据结构之动态数组

    数组列表:动态数组(Array List) 简介: 最基础简单的数据结构.最大的优点就是支持随机访问(O(1)),但是增加和删除操作效率就低一些(平均时间复杂度O(n)) 动态数组也称数组列表,在py ...

  6. Metasploit services

    漏洞挖掘/漏洞分析-- Cve.mitre.org www.corelan.be----geek of pentesters http://wrox.cn/article/100048133/    ...

  7. abi-api, arm target triplet https://en.wikipedia.org/wiki/ARM_architecture

    GNU软件用target triplet来描述工作平台,target triplet是一种规范化的名称,形如cpu-vendor-os(where os can be ‘system’ or ‘ker ...

  8. [转]基于S2SH框架的项目—antlr-2.7.2.jar包冲突问题

    java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I        org.hibernate.hql.ast.HqlSqlWal ...

  9. dedecms网站迁移时记得将安装目录放空 附迁移的正确方法

    这段时间在赶一些新项目,我们建站一般都在本地服务器搭建起来,测试得差不多了才传到网上,这样对蜘蛛也相对友好一些,要不然改来改去变化太大给搜索引擎的第一印象很不好.但是由于本地环境和服务器环境还是有一些 ...

  10. 001-Spring Cloud Edgware.SR3 升级最新 Finchley.SR1，spring boot 1.5.9.RELEASE 升级2.0.4.RELEASE注意问题点

    一.前提 升级前 => 升级后 Spring Boot 1.5.x => Spring Boot 2.0.4.RELEASE Spring Cloud Edgware SR3 => ...