用原生JavaScript代码编写类似微博发布的。

太过爱你忘了你带给我的痛 2022-06-07 02:12 165阅读 0赞

**今天简单的用JS代码来创建一个类似微博发布的小项目。**

**先把整个代码拷过来：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
            * {
            	margin: 0;
            	padding: 0;
            }
    
            .box {
            	 margin: 100px auto;
            	 width: 600px;
            	 border: 1px solid #333; 
                 padding: 30px 0;
                 overflow: hidden;
            }
    
            textarea {
            	  width: 450px;
                  line-height: 30px;
                  margin-left: 10px;
                  resize: none;
            }
    
            ul {
            	list-style: none;
            	width: 80%;
            	margin: 0 auto;
            }
    
            ul > li {
            	  padding: 6px 20px;
            	  line-height: 20px;
    
            	  border-bottom: 1px dashed #ccc;
            }
    
            ul > li > a {
            	float: right;
            }
    	</style>
    </head>
    <body>
    	<div class="box">
                    微博发布:
    	    <textarea cols="30" rows="10"></textarea>
    	    <button id="btn">发布</button>
    	    
    	</div>
    	<script type="text/javascript">
               window.onload = function() {
               	    // 1 获取对象
                    var btn = document.getElementById("btn");
                    var tt = document.getElementsByTagName("textarea")[0];
                     //  创建父亲
                    var ul = document.createElement("ul");
                    // 给发布按钮注册单击事件
                    btn.onclick = function() {
                          if(tt.value == "") {
                          	   alert("输入的内容不能为空");
                          	   return;// 提前函数调用结束
                          }
                         // alert(tt.value); 获取文本域的值
                         var  tt_value = tt.value; 
                         tt.value = "";
                         // 创建儿子
                         var liEle = document.createElement("li");
                         liEle.innerHTML = tt_value+"<a href='#'>删除</a>";
                         //
                         if(ul.children.length ==0) {
                           
                         	 ul.appendChild(liEle);
                             
                         } else {
                         	 ul.insertBefore(liEle, ul.children[0]);
                         }
                         
                         // 整个ul追加到div内部去
                         this.parentNode.appendChild(ul);
    
                         var as = document.getElementsByTagName("a");
                         for(var i=0; i<as.length; i++) {
                         	  as[i].onclick = function() {
                         	  	  ul.removeChild(this.parentNode);
                         	  	  return false;
                         	  }
                         }
    
                    }
               }
    
    
               
    	</script>
    </body>
    </html>

创建一个这样的需要发布内容，用到HTML5的

< textarea cols= "30" rows= "10"></ textarea>

标签，行和列可以自己定义。 这些代码用到大多是dom的操作，比如

document. createElement();

appendChild();

insertBefore();

removeChild();

**如果对dom操作熟悉的话并不难，赶紧去练练手吧。**

**![Center][]**

[Center]: /images/20220607/eee639f58d3d4b03a94d59d49372f6bc.png