집 > 기사 > 웹 프론트엔드 > JavaScript 모방 Weibo 게시 정보 사례

JavaScript 모방 Weibo 게시 정보 사례

高洛峰원래의: 2016-12-06 16:11:361316검색

요즘 웨이보에 뉴스를 올리는 것과 유사한 효과가 많이 있습니다. 다음은 자바스크립트로 웨이보에 정보를 올리는 작은 예입니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微博发布</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; /*设置文本不能过拖动*/
    }
    .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 (){
      //获取数组的第一个
      var btn = document.getElementsByTagName("button")[0];
      var txt = document.getElementsByTagName("textarea")[0];
      var ul = document.createElement("ul");
      btn.parentNode.appendChild(ul); //添加子节点
      btn.onclick = function (){
 
        //1.需要判断文本中是否有内容
        if(txt.value == ""){
 
          alert("亲!内容不能为空哦!!");
 
          return false; //让操作就在这个地方终止
        }
 
        var newli = document.createElement("li"); //创建一个新的li标签
        newli.innerHTML = txt.value +"<a href=&#39;javascript:;&#39;>删除</a>"; //给新的标签添加内容，并拼接删除已连接
        ul.appendChild(newli);
 
        //清空输入框
        txt.value = "";
 
        var aa = document.getElementsByTagName("a");//获取所有的a标签
 
        for(var i = 0;i<aa.length;i++){ // 遍历点击删除
 
          aa[i].onclick = function () {
 
            this.parentNode.remove();
          }
        }
 
 
      }
 
    }
 
  </script>
</head>
<body>
<div class="box">
 
  微博发布:<textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>
 
</div>
</body>
</html>

레이아웃 스타일의 경우 파란색 삭제 링크를 클릭하면 해당 내용 줄이 삭제됩니다.

JavaScript 모방 Weibo 게시 정보 사례

모모가 말했습니다: 중요 지식 포인트: 입력 상자의 값을 얻고, 하위 노드를 생성하고 하위 노드에 콘텐츠를 추가하고, 해당 노드를 삭제합니다.

성명：

이전 기사：JavaScript를 사용하여 URL에서 매개변수 가져오기다음 기사：JavaScript를 사용하여 URL에서 매개변수 가져오기

JavaScript 모방 Weibo 게시 정보 사례

관련 기사