亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2016年11月16日 08:37:31   作者:Bigerf  
這篇文章主要為大家詳細(xì)介紹了JavaScript仿微博發(fā)布信息案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

現(xiàn)在很多類似以微博發(fā)布動(dòng)態(tài)的效果,下面為一個(gè)用 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è)置文本不能過拖動(dòng)*/
    }
    .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ù)組的第一個(gè)
      var btn = document.getElementsByTagName("button")[0];
      var txt = document.getElementsByTagName("textarea")[0];
      var ul = document.createElement("ul"); 
      btn.parentNode.appendChild(ul); //添加子節(jié)點(diǎn)
      btn.onclick = function (){

        //1.需要判斷文本中是否有內(nèi)容
        if(txt.value == ""){

          alert("親!內(nèi)容不能為空哦!!");

          return false; //讓操作就在這個(gè)地方終止
        }

        var newli = document.createElement("li"); //創(chuàng)建一個(gè)新的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++){ // 遍歷點(diǎn)擊刪除

          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>

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

陌陌說:重要知識(shí)點(diǎn):獲取輸入框的數(shù)值,創(chuàng)建子節(jié)點(diǎn)和給子節(jié)點(diǎn)添加內(nèi)容,刪除對應(yīng)的節(jié)點(diǎn)。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論