JS特效實現微博評論邏輯
阿新 • • 發佈：2018-09-16
doctype creat right padding href rip cli textarea ==
- 實現代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; list-style: none; } #header{ position: relative; width: 800px; border:1px solid #ccc; padding-top: 30px; margin:100px auto; background-color: pink; box-shadow: 0 0 10px darkblue; } .tip{ position: absolute; top: 5px; left: 10px; } #top #btn{ position:absolute; top:0; right: 100px; margin-top: 5px; width: 30px; } #my_textarea{ width: 80%; height: 150px; margin-left: 50px; box-shadow: 0 0 15px black; color: black; font-weight: bolder; font-size: 16px; opacity: 0.2; z-index: 1; } #top{ margin-bottom: 20px; } #bottom ul{ margin: 0 80px; margin-bottom:20px; } #bottom ul li{ border-bottom: 1px dashed #ccc; line-height: 44px; color: red; } #bottom ul li a{ cursor: pointer; float:right; } </style> </head> <body> <div id="header"> <div id="top"> <label class="tip" for="my_textarea">發表評論:</label> <textarea cols="60" rows="10" id="my_textarea"></textarea> <button id="btn">發表</button> </div> <div id="bottom"> <ul id="ul"></ul> </div> </div> <script> window.onload=function(){ $("btn").onclick=function(){ //alert("0"); // 用一個變量來接收輸入的內容 var content=$("my_textarea").value; //console.log(content); //判斷當輸入的內容為空時,提示用戶輸入評論的內容 if(content.length===0){ alert(‘請輸入評論的內容！‘); return; } //創建一個li標簽動態的插入ul中 var li=document.createElement("li"); li.innerHTML=content+‘<a href="javascript:;">刪除</a>‘; /* //將創建的li標簽插入到ul標簽中； $("ul").appendChild(li); */ //將新 輸入的內容放在第一條 $("ul").insertBefore(li,$("ul").children[0]); //清除輸入框中的內容； $("my_textarea").value=‘‘; //刪除評論內容 //1.獲取a標簽，監聽a標簽的點擊事件 var aAll=$("ul").getElementsByTagName("a"); //console.log(aAll); for(var i=0;i<aAll.length;i++){ var a=aAll[i]; a.onclick=function(){ //alert(1); //獲取父標簽刪除 this.parentNode.remove(); } } } } function $(id){ return typeof id==="string"?document.getElementById(id):null; } </script> </body> </html>2.實現效果圖：
JS特效實現微博評論邏輯