首页
所有分类
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 live
May 15 Javascript
js 金额文本框实现代码
Feb 14 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
openGauss(1) 太阳码(1) pdf(1) cypress(1) 延时任务(1) ant design(2) JDBC(3) 弹窗(1) Eclipse(1) Word(2)
You might like
php常用字符串比较函数实例汇总
2014/11/24 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
vue-cli 引入jQuery，Bootstrap，popper的方法
2018/09/03 jQuery
JavaScript指定断点操作实例教程
2018/09/18 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
PyQt5实现拖放功能
2018/04/25 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
超简单使用Python换脸实例
2019/03/27 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python同步两个文件夹下的内容
2019/08/29 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
印度购物网站：TATA CLiQ
2017/11/23 全球购物
世界闻名的衬衫制造商：Savile Row Company
2018/07/30 全球购物
DogBuddy荷兰：找到你最完美的狗保姆
2019/04/17 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
球队口号
2014/06/18 职场文书