JS实现仿腾讯微博无刷新删除微博效果代码


Posted in Javascript onOctober 16, 2015

本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码。分享给大家供大家参考。具体如下:

这里演示JS仿腾讯微博无刷新删除效果,将显示在微博列表里的内容删除,运用AJAX技术,无刷新删除微博的内容,参考性强,希望对初学AJAX的朋友有所帮助。

运行效果截图如下:

JS实现仿腾讯微博无刷新删除微博效果代码

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
多个js与css文件的合并方法详细说明
Dec 26 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
解决JS请求服务器gbk文件乱码的问题
Oct 16 #Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 #Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 #Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 #Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 #Javascript
javascript实现3D切换焦点图
Oct 16 #Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 #Javascript
You might like
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
基于php split()函数的用法详解
2013/06/05 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
深入解析Python中的上下文管理器
2016/06/28 Python
Sanic框架应用部署方法详解
2018/07/18 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python for循环及基础用法详解
2019/11/08 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python 如何查找特定类型文件
2020/08/17 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
EJB的角色和三个对象
2015/12/31 面试题
迅雷Cued工作心得体会
2014/01/27 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
户外拓展训练感想
2015/08/07 职场文书
寒假致家长的一封信
2015/10/10 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫