js实现微博评论动态添加

来源：互联网发布：蝙蝠算法编辑：程序博客网时间：2024/06/05 16:53
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0        }        ul {            list-style: none;            margin-top: 30px;        }        .box {            width: 600px;            margin: 100px auto;            border: 1px solid #ccc;            border-radius: 3px;            padding: 20px;        }        textarea {            width: 100%;            height: 68px;            outline: none;            resize: none;        }        ul {            width: 450px;            padding-left: 80px;        }        ul li {            line-height: 25px;            border-bottom: 1px dashed #ccc;        }        .title {            float: left;        }        .num {            float: right;        }        .input {            margin-top: 4px;            padding: 5px;        }        .func {            float: right;        }        #btn {            display: inline-block;            height: 28px;            line-height: 29px;            width: 60px;            min-width: 40px;            font-size: 14px;            background-color: #ff8140;            color: #fff;            box-shadow: none;            cursor: default;            border: 1px solid #f77c3d;            outline: none;            padding: 0 10px;            border-radius: 2px;            text-align: center;        }        input {            float: right;        }    </style></head><body><div class="box" id="weibo">    <div>        <div class="title">有什么新鲜事想告诉大家</div>        <div class="num">还可以输入<span>140</span>字</div>    </div>    <div style="clear: both"></div>    <div class="input">        <textarea name="" id="txt" cols="20" rows="10"></textarea>    </div>    <div class="func">        <a id="btn">发布</a>    </div>    <div style="clear: both"></div>    <ul id="ul"></ul>    <div></div></div><script src="../AmyjsFunction/myfunction.js"></script><script>    var txt = document.getElementById("txt");    var btn = document.getElementById("btn");    var ul = document.getElementById("ul");    btn.onclick = function(){        var val =  txt.value;        if(val === ""){            alert("请输入内容");            return;        }        var li = document.createElement("li");        var span = document.createElement("span");        setInnerText(span,val);        li.appendChild(span);        var lis = ul.children;        if(lis.length === 0){            ul.appendChild(li);        }else{            ul.insertBefore(li,lis[0]);        }        txt.value = "";        var btn = document.createElement("input");        btn.type= "button";        btn.value = "删除"        li.appendChild(btn);        btn.onclick = function(){            var li = this.parentNode;            ul.removeChild(li);        }    }</script></body></html>
0 0