当前位置：Gxlcms > JavaScript > js模拟微博发布消息

js模拟微博发布消息

时间：2021-07-01 10:21:17 帮助过：7人阅读

话不多说，请看代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title>js模拟微博发布消息</title>
  7.   </head>
  8.   <style>
  9.     *{
  10.       padding: 0;
  11.       margin: 0;
  12.     }
  13.     .box{
  14.       width: 600px;
  15.       height:auto;
  16.       margin: 100px auto;
  17.       border: 1px solid #ccc;
  18.       padding: 20px;
  19.     }
  20.     .box span{
  21.       line-height: 36px;
  22.     }
  23.     input{
  24.       width: 450px;
  25.       padding: 10px;
  26.     }
  27.     .text-box {
  28.       display: inline-block;
  29.       width: 450px;
  30.      text-align: left;
  31.      min-height: 30px;
  32.      line-height: 26px;
  33.      border: 1px solid #ddd;
  34.      padding: 3px 8px;
  35.     }
  36.     ul{
  37.       margin: 20px auto;
  38.       margin-left: 70px;
  39.       width: 450px;
  40.       list-style:none ;
  41.     }
  42.     li{
  43.       border-bottom: 1px dashed #ddd;
  44.       line-height: 34px;
  45.       margin: 5px 0;
  46.       overflow: hidden;
  47.     }
  48.     ul li .date{
  49.       float: right;
  50.       margin-right: 10px;
  51.       font-size: 12px;
  52.     }
  53.     ul li a{
  54.       float: right;
  55.     }
  56.     button{
  57.       padding: 6px 12px;
  58.     }
  59.   </style>
  60.   <body>
  61.     <div class="box"id="box">
  62.       <span>微博发布</span>
  63.       <!--<input type="" name="" id="" value="" />-->
  64.       <div contenteditable="true" class="text-box form-control"id="text-box"></div>
  65.       <button>发布</button>
  66.       <!--<ul>
  67.         <li>
  68.           123123
  69.           <a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a>
  70.           <span class="date">2017/2/22</span>
  71.         </li>
  72.       </ul>-->
  73.     </div>
  74.   </body>
  75. </html>
  76. <script type="text/javascript">
  77.   window.onload=function(){
  78.     var box=document.getElementById("box")
  79.     var txt=document.getElementById("text-box");
  80.     var btn=document.getElementsByTagName("button")[0];
  81.     var ul=document.createElement("ul");
  82.     box.appendChild(ul);
  83.     btn.onclick=function(){
  84.       if (txt.innerHTML=='') {
  85.         alert('不能为空');
  86.         return false;
  87.       }
  88.       var myDate = new Date();
  89.       var time=myDate.toLocaleString();
  90.       var li=document.createElement("li");
  91.       ul.appendChild(li);
  92. li.innerHTML=txt.innerHTML+'<a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a><span class="date">'+time+'</span>';
  93.       txt.innerHTML='';
  94.       var lis=ul.children;
  95.       if (lis==0) {
  96.         ul.appendChild(li);
  97.       } else{
  98.         ul.insertBefore(li,lis[0])
  99.       }
  100. //      删除功能
  101.       var dele=document.getElementsByTagName("a");
  102.       for (var k = 0; k < dele.length; k++) {
  103.         dele[k].onclick=function(){
  104.           ul.removeChild(this.parentNode);
  105.         }
  106.       }
  107.     }
  108.   }
  109. </script>

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！