四、小功能模块——发微博（增加删除标签）

深碍√TFBOYSˉ_ 2022-03-12 18:53 162阅读 0赞

这个是简单版本的，适合新手，但是所有的复杂的都是在简单的基础上进行修饰，原理是一样的，越努力越优秀

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70][]

先来讲一下思路：

（1）在输入框中输入文字

（2）点击添加按钮，输入框的文字会变成一条数据自动添加到下面的框框里，并且最新插入的会放在最上面，就像微博一样

（3）点击红色的小X，会把一整条数据删除掉；

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	<style>
    			*{
    				margin: 0px;
    				padding: 0px;
    				list-style: none;
    			}
    			textarea{
    				width: 400px;
    				height: 200px;
    				border: 1px solid #ccc;
    				outline: none;
    				resize: none;
    				border-radius: 10px;
    			}
    			button{
    				border: none;
    				background: #3380ff;
    				padding: 8px 10px;
    				color: #fff;
    				cursor: pointer;
    			}
    			ul{
    				width: 960px;
    				margin: 0px auto;
    				border: 1px solid #000;
    				padding: 20px 0px;
    			}
    			li{
    				background: lime;
    				border-radius: 4px;
    				margin: 20px;
    			}
    			span{
    				float: right;
    				background: red;
    				width: 20px;
    				cursor: pointer;
    			}
    		</style>
    	</head>
    	<body>
    		<textarea name="" id="txt" ></textarea>
    		<button id="btn">发布微博</button>
    		<ul id="box">
    			<li>昨天天气晴<span class="del">X</span></li>
    		</ul>
    		
    		<script>
    			
    			btn.onclick=function(){
                    
    				var lis=document.getElementsByTagName('li');
    				var oli=document.createElement('li');
                    
    				var a=txt.value;
                           
    				if(lis[0]){
    					lis[0].parentNode.insertBefore(oli,lis[0]);
    				}else{
    					box.appendChild(oli);
    				}
                    
    				oli.innerHTML=a+'<span class="del">X</span>';
                    
    				var dels=document.getElementsByClassName('del');
    					for(var i=0;i<dels.length;i++){
    						dels[i].onclick=function(){
    							this.parentNode.parentNode.removeChild(this.parentNode);
    						}
    					}
    			}
    		</script>
    
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70]: /images/20220312/a0e395b4b29248e0a41d2b8fa00b13c2.png