首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
图片上传插件jquery.uploadify详解
Nov 15 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）
Dec 02 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
解决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
信号同步(1) reduce()(1) springCloud(6) 生命周期(1) 死锁(3) 远程连接(2) 限流器(1) Flask(2) 进度条(1) 轮询锁(1)
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
ThinkPHP模板标签eq if 中区分0，null，false的方法
2017/03/24 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Pycharm学习教程（5） Python快捷键相关设置
2017/05/03 Python
Python实现的径向基（RBF）神经网络示例
2018/02/06 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python3.7黑帽编程之病毒篇（基础篇）
2020/02/04 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
python程序输出无内容的解决方式
2020/04/09 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
美国羊皮公司：Overland
2018/01/15 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
方正Java笔试题
2014/07/03 面试题
物流管理专业毕业生求职信
2014/03/23 职场文书
中华魂演讲稿
2014/05/13 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
追悼会答谢词范文
2015/09/29 职场文书
管理者们如何制定2019年的工作计划？
2019/07/01 职场文书