经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript连载38-编写评论界面 - 心悦君兮君不知-睿
来源:cnblogs  作者:心悦君兮君不知-睿  时间:2021/3/1 9:13:57  对本文有异议

一、编写评论页面

  1. <!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>
  • 通过编写动态页面来进行,生成评论 38.1

二、源码:

  • 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
  • 欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流
    911

原文链接:http://www.cnblogs.com/ruigege0000/p/14439034.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号