js模拟微博发布消息

话不多说，请看代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>js模拟微博发布消息</title>
  </head>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      width: 600px;
      height:auto;
      margin: 100px auto;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .box span{
      line-height: 36px;
    }
    input{
      width: 450px;
      padding: 10px;
    }
    .text-box {
      display: inline-block;
      width: 450px;
     text-align: left;
     min-height: 30px;
     line-height: 26px;
     border: 1px solid #ddd;
     padding: 3px 8px;
    }
    ul{
      margin: 20px auto;
      margin-left: 70px;
      width: 450px;
      list-style:none ;
    }
    li{
      border-bottom: 1px dashed #ddd;
      line-height: 34px;
      margin: 5px 0;
      overflow: hidden;
    }
    ul li .date{
      float: right;
      margin-right: 10px;
      font-size: 12px;
    }
    ul li a{
      float: right;
    }
    button{
      padding: 6px 12px;
    }
  </style>
  <body>
    <div class="box"id="box">
      <span>微博发布</span>
      <!--<input type="" name="" id="" value="" />-->
      <div contenteditable="true" class="text-box form-control"id="text-box"></div>
      <button>发布</button>
      <!--<ul>
        <li>
          123123
          <a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a>
          <span class="date">2017/2/22</span>
        </li>
      </ul>-->
    </div>
  </body>
</html>
<script type="text/javascript">
  window.onload=function(){
    var box=document.getElementById("box")
    var txt=document.getElementById("text-box");
    var btn=document.getElementsByTagName("button")[0];
    var ul=document.createElement("ul");
    box.appendChild(ul);
    btn.onclick=function(){
      if (txt.innerHTML=='') {
        alert('不能为空');
        return false;
      }
      var myDate = new Date();
      var time=myDate.toLocaleString();
      var li=document.createElement("li");
      ul.appendChild(li);
li.innerHTML=txt.innerHTML+'<a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a><span class="date">'+time+'</span>';
      txt.innerHTML='';
      var lis=ul.children;
      if (lis==0) {
        ul.appendChild(li);
      } else{
        ul.insertBefore(li,lis[0])
      }
//      删除功能
      var dele=document.getElementsByTagName("a");
      for (var k = 0; k < dele.length; k++) {
        dele[k].onclick=function(){
          ul.removeChild(this.parentNode);
        }
      }
    }
  }
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 原生JavaScript制作微博发布面板效果

    原生JavaScript制作微博发布面板效果

    javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

  • js仿新浪微博消息发布功能

    本文实例为大家分享了js仿新浪微博消息发布的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息发布功能</title> <style> *{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px so

  • 基于javascript制作微博发布栏效果

    本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用  var ie=!-[1,];即可 2.连续发生事件的用法:  IE下:触发对象.onpropertychange  标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • JS实现模仿微博发布效果实例代码

    JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • JS实现仿新浪微博发布内容为空时提示功能代码

    JS实现仿新浪微博发布内容为空时提示功能代码

    本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:

  • js实现微博发布小功能

    微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设置为不可拖拽. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <

  • js控住DOM实现发布微博效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博消息效果</title> <style> *{margin:0;padding: 0;} .warp{ width: 600px; mar

  • JavaScript仿微博发布信息案例

    JavaScript仿微博发布信息案例

    现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;

  • js模拟微博发布消息

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>

  • JS模拟的腾讯微博app撕纸效果的实例代码

    腾讯微博app撕纸效果 body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;}

  • python爬虫-模拟微博登录功能

    微博模拟登录 这是本次爬取的网址:https://weibo.com/ 一.请求分析 找到登录的位置,填写用户名密码进行登录操作 看看这次请求响应的数据是什么 这是响应得到的数据,保存下来 exectime: 8 nonce: "HW9VSX" pcid: "gz-4ede4c6269a09f5b7a6490f790b4aa944eec" pubkey: "EB2A38568661887FA180BDDB5CABD5F21C7BFD59C090CB2D24

  • js模拟百度模糊搜索的实例

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } input{ display:block; list-style:none; } html,body{ color:#0

  • JS模拟抽奖序效果实现代码

    JS模拟抽奖效果 .a1{ position:relative; font-family:Verdana; font-size:20px; color:#888888; } function lotto(){ if (!document.all&&!document.layers) return for (j=1; j  "+Nos+""); document.layers.layer1.document.close(); } T=setTimeout('lo

  • 原生js模拟淘宝购物车项目实战

    原生js模拟淘宝购物车项目实战

    本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项

  • js模拟select下拉菜单控件的代码

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <meta charset=utf-8 /> <title>js模拟select</title> </head>    <style>   *{ marg

  • JS模拟实现ECMAScript5新增的数组方法

    ECMAScript5 新增了十个数组方法,这些方法只有在ie9及以上浏览器中可以被使用,下面是对于这些方法的模拟实现. 一.Array.isArray(element) 该方法用于判断传入的对象是否为数组类型,返回true和false. Array.newIsArray = function(element){ return Object.prototype.toString.call(element).slice(8,-1).toLocaleLowerCase() === 'array';

  • JS模拟并美化的表单控件完整实例

    JS模拟并美化的表单控件完整实例

    本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • JS模拟实现方法重载示例

    本文实例讲述了JS模拟实现方法重载.分享给大家供大家参考,具体如下: 在JS方法中,不能像C#方法能实现重载,但是我们可以通过js中的arguments来实现js方法的重载. 下面给出html实例: <html> <head> <title>JS方法的重载</title> <script> function testFun1(arm1){ /// <summary> /// JS重载测试被调用方法1 /// </summary&

随机推荐