QQ聊天消息展示，提交评论实现

最新推荐文章于 2021-02-24 21:00:58 发布

非为000

最新推荐文章于 2021-02-24 21:00:58 发布

阅读量507

点赞数 1

分类专栏： Javascript_note 文章标签： return 创建元素添加元素 textarea

本文链接：https://blog.csdn.net/qq_30669833/article/details/72598768

版权

Javascript_note 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

QQ聊天消息显示，提交评论等实现原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .bos {
                margin: 100px auto;
                width: 350px;
                position: relative;
            }

            .bos a {
                float: right;
            }

            button {
                position: relative;
                left: 301px;
                bottom: 0;
            }

            textarea {
                width: 350px;
                resize: none;
            }

            ul li {
                list-style: none;
            }
        </style>

        <script type="text/javascript">
            window.onload = function() {
                var txt = document.getElementById('txt');
                var btn = document.getElementsByTagName('button')[0];
                var oUl = document.getElementsByTagName('ul')[0];

                btn.onclick = function() {
                    if(txt.value == '') {
                        alert('请输入...');
                        return false; //结束事件*******
                    }

                    var newli = document.createElement('li');     //创建标签<li></li>
                    newli.innerHTML = txt.value + '<a href = "#">删除<a>';

                    //oUl.appendChild(newli);     //将创建标签<li></li>加到最后面

                    var lis = oUl.childNodes;    //oUl.children
                    oUl.insertBefore(newli, lis[0]);     //将创建标签<li></li>加到最前面
                    txt.value = '';


                    //删除发出去的消息
                    var oA = document.getElementsByTagName('a');
                    for(var i = 0; i < oA.length; i++) {
                        oA[i].onclick = function() {
                            oUl.removeChild(this.parentNode);
                        }
                    }
                }
            }
        </script>

    </head>

    <body>
        <div id="box" class="bos">
            <textarea name="" id="txt" cols="30" rows="10"></textarea>
            <button>submit</button>
            <ul></ul>
        </div>
    </body>

</html>