js模拟微博发布消息

2019-11-19 17:26:07

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!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>

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

上一篇：JS正则表达式验证密码格式的集中情况总结

下一篇：Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信