首页
所有分类
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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
表格 隔行换色升级版
Nov 07 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
vue随机验证码组件的封装实现
Feb 19 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
PostMapping(1) 温控(1) 内存泄露(1) Xception(1) 小喇叭开始广播了(1) 小喇叭(1) Lifecycle(1) 微信(2) ResNet50(1) Spring(9)
You might like
PHP计算近1年的所有月份
2017/03/13 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
微信小程序 开发MAP（地图）实例详解
2017/06/27 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
一个基于flask的web应用诞生 组织结构调整（7）
2017/04/11 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
植物选择：Botanic Choice
2017/02/15 全球购物
商务专员岗位职责
2013/11/23 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
教师党性分析材料
2014/02/04 职场文书
元宵晚会主持词
2014/03/25 职场文书
爱心倡议书范文
2014/05/12 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年教研室工作总结
2014/12/06 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android