<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .father { width: 800px; margin: 0 auto; } .content { height: 120px; padding: 10px; border: 1px solid red; } .commens { padding: 10px; border: 1px solid green; } .commens div { padding: 5px 8px; border-bottom: 1px dashed #666; } .add { width: 780px; margin: 0 auto; margin-top: 10px; border: 1px solid blue; padding: 10px; padding-bottom: 60px; } textarea { display: block; width: 760px; margin: 0 auto; height: 120px; resize: none; } input[type="button"] { float: right; padding: 10px 14px; margin-top: 10px; margin-right: 4px; } </style> </head> <body> <div class="father"> <div class="content"> 我很帅,你们觉得吗?欢迎评论哦,亲!!! </div> <div class="commens" id="commens"> <div>评论:</div> </div> </div> <div class="add"> <textarea name="" id="txt"></textarea> <input type="button" value="发表" id="btn"/> </div> <script> var btn=document.getElementById("btn"); var txt=document.getElementById("txt"); var commens=document.getElementById("commens"); btn.onclick=function(){ if(txt.value.length==0){ return; } var div=document.createElement("div"); div.innerHTML=txt.value; commens.appendChild(div); txt.value=""; } </script> </body> </html>
微博无刷新评论功能实现案例
最新推荐文章于 2021-05-26 06:46:34 发布