首页
所有分类
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中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
细说webpack6 Babel的使用详解
Sep 26 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) 鉴频器(1) 发烧友(1) 电路(15) 灵敏度(1) 实习报告(1) 高放电路(1) 频偏(1) 数调机(1) AM(1)
You might like
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jquery 操作单选框，复选框，下拉列表实现代码
2009/10/27 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python安装教程
2018/02/28 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
美德好少年主要事迹
2014/01/29 职场文书
党的群众路线学习材料
2014/05/16 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript