每天一个效果 ：（15）发布评论

今天迎来了我们每日一个效果的最后一期，下阶段打算把我的小程序改一改，然后就去学vue了。

说说今天的效果，发布评论，这个效果，相信大家都见过，对文章或者视频什么的发布评论。我们今天就来做这个效果吧~

我们先看一下html和css吧

    <div id="box">
        <div class="box_top">
            <textarea name="" id="comment" cols="80" rows="10" placeholder="请您输入您的评论"></textarea>
            <button id="btn">发布</button>
        </div>
        <ul id="comment_content">

        </ul>
    </div>


    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        #box {
            width: 1000px;
            border:  1px solid #ccc;
            margin: 100px auto;
            padding: 20px;
        }
        #comment {
            width: 80%;
            padding: 10px 10px;
            font-size: 20px;
            outline: none;
        }
        .box_top {
            margin-bottom: 20px;
        }
        #comment_content li {
            border-bottom: 1px dashed #ccc;
            width: 800px;
            color: red;
            line-height: 45px;
        }
        #comment_content li a {
            float: right;
        }
    </style>

接着来看一下效果

 我们来看一下js的代码，逻辑都写在里面了

    <script type="text/javascript">
        window.onload = function () {
            // 逻辑：1.监听按钮的点击
            //1.1获取用户输入的内容
            $('btn').onclick = function () {
                var content = $('comment').value;
                //1.2判断

                if (content.length === 0) {
                    alert('请输入内容');
                    return;
                }
                //1.3创建li标签插入到ul中
                var newLi = document.createElement('li');
                newLi.innerHTML = "{content}<a herf = 'javascript:void(0)'>删除<a>";
                // $('comment_content').appendChild(newLi);
                $('comment_content').insertBefore(newLi,$('comment_content').children[0])
                //1.4清空输入框中的内容
                $('comment').value = '';
                //1.5删除评论
                var delBtns = document.getElementsByTagName('a');
                for(var i = 0;i<delBtns.length;i++){
                    delBtns[i].onclick = function(){
                        this.parentNode.remove();
                    }
                }

            }



            function $(id) {
                return typeof id === 'sttring' ? document.getElementById(id) : null;
            }
        }
    </script>

最后来看看效果吧