JavaScript仿微博發(fā)布信息案例

2019-11-19 18:58:12

字體：大中小

供稿：網(wǎng)友

現(xiàn)在很多類似以微博發(fā)布動態(tài)的效果，下面為一個用 JavaScript寫的小小的類似微博發(fā)布信息的案例

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>微博發(fā)布</title>  <style type="text/css">    *{      padding: 0;      margin: 0;    }    ul {      list-style: none;    }    .box {      width: 600px;      height: auto;      border: 1px solid #ccc;      margin: 100px auto;      text-align: center;      padding: 30px 0;      background-color: rosybrown;    }    .box textarea {      width: 450px;      resize: none; /*設(shè)置文本不能過拖動*/    }    .box li {      width: 450px;      line-height: 30px;      border-bottom: 1px dashed #ccc;      margin-left: 80px;      text-align: left;    }    .box li a {      float: right;    }  </style>  <script type="text/javascript">    window.onload = function (){      //獲取數(shù)組的第一個      var btn = document.getElementsByTagName("button")[0];      var txt = document.getElementsByTagName("textarea")[0];      var ul = document.createElement("ul");       btn.parentNode.appendChild(ul); //添加子節(jié)點      btn.onclick = function (){        //1.需要判斷文本中是否有內(nèi)容        if(txt.value == ""){          alert("親!內(nèi)容不能為空哦!!");          return false; //讓操作就在這個地方終止        }        var newli = document.createElement("li"); //創(chuàng)建一個新的li標(biāo)簽        newli.innerHTML = txt.value +"<a href='javascript:;'>刪除</a>"; //給新的標(biāo)簽添加內(nèi)容，并拼接刪除已連接        ul.appendChild(newli);        //清空輸入框        txt.value = "";        var aa = document.getElementsByTagName("a");//獲取所有的a標(biāo)簽        for(var i = 0;i<aa.length;i++){ // 遍歷點擊刪除          aa[i].onclick = function () {            this.parentNode.remove();          }        }      }    }  </script></head><body><div class="box">  微博發(fā)布:<textarea name="" id="" cols="30" rows="10"></textarea>  <button>發(fā)布</button></div></body></html>

布局出來的樣式，點擊藍(lán)色的刪除鏈接，會刪除對應(yīng)的那一行內(nèi)容。