JavaScript连载38-编写评论界面

一、编写评论页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>D38_1_Review</title>    <style>        *{            margin:0;            padding:0;            list-style:none;        }        #box{            width:800px;            border:1px solid #ccc;            margin:100px auto;            padding:20px;        }        #my_textarea{            width:80%;            height:120px;        }        .box-top {            margin-bottom:20px;        }        #ul li{            border-bottom:1px dashed #ccc;            color:red;            line-height:44px;        }        #ul li a{            float:right;        }    </style></head><body>    <div id="box">        <div class="box-top">            <label>发表评论</label>            <textarea id="my_textarea" cols="60" rows="10"></textarea>            <button id="btn">发表</button>        </div>        <ul id="ul">            <li>这是第一条评论<a href="#">删除</a></li>        </ul>    </div>    <script type="text/javascript" src="jquery-3.5.1.js">        window.addEventListener('load',function(ev){            // $符号就是监听某一个label            $('btn').addEventListener('click',function (ev1) {                // 获取输入框的内容                var content = $("my_textarea").value; // 取到它的值                console.log(content);                if(content.length == 0) {                    alert("请输入评论的内容"); // 直接抛出的函数                    return;                }                // 创建li标签                var li = document.createElement("li"); // 创建一个li标签                li.innerHTML = content + '<a href="javascript:;">删除</a>'; // li标签的内容   .innerHTML                $('ul').insertBefore(li,$('ul').children[0]) // 先拿到ul标签，然后把li这个变量插入到ul中第一个li的前面                // 清除输入框中的内容                my_textare.value = '';

                // 删除评论                var as = ul.getElementsByTagName('a');                console.log(as);                for(var i=0;i<as.length;i++) {                    var a = as[i];                    a.addEventListener("click",function (ev2) {                       this.parentNode.remove(); // 这个标签就被删除了                    });                }            });           // 监听按钮的点击           function $(id) {               return typeof id=='string' ?document.getElementById(id):null;            }        });    </script></body></html>
  • 通过编写动态页面来进行，生成评论

二、源码：

  • D38_1_Review.html
  • 地址:https://github.com/ruigege66/JavaScript/blob/master/D38_1_Review.html
  • 博客园：https://www.cnblogs.com/ruigege0000/
  • CSDN：https://blog.csdn.net/weixin_44630050?t=1
  • 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
赞 (0)

相关推荐