完成课程中的内容:聊天信息的生成原理

原创 2019-07-29 15:10:46 261
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>message boar
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>message board</title>
    <link rel="stylesheet" href="work2.css">
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .container{
            border-radius:5%;
            border:1px solid black;
            min-height:600px;
            width:400px;
            margin:0 auto;
            background:lightgreen;
            color:white;
            position:relative;
        }
        .container p,input,textarea,h4,button{
            position:relative;
            left:20px;
            margin:5px 0px;
        }
        .container #submit,#reset{
            border-radius:5%;
            width:80px;
            height:30px;
            background-color:lightsalmon;
            border:none;
            margin:10px;
        }
    </style>
</head>
<body>
<div class="container">
    <p>please input your name:</p>
    <input type="text" id="username" placeholder="example:xxx">
    <p>please input your message:</p>
    <textarea id="comment" cols="30" rows="10" placeholder="example:hello world"></textarea>
    <br>
    <button id="submit">SUBMIT</button>
    <input type="reset" value="RESET" id="reset">
    <hr>
    <h4>聊天信息</h4>
    <ul id="list">
    </ul>
    <script>
        var submit=document.getElementById("submit");
        var username=document.getElementById("username");
        var comment=document.getElementById("comment");
        var list=document.getElementById("list");
        //添加
        submit.addEventListener('click',addComment,false);
        function addComment(event){
            var item=document.createElement("li");
            item.innerHTML="name: "+username.value+"-----"+"message: "+comment.value+"  <button style='border:none;background-color:black;color:white;width:60px;height:25px;'>删除</button>"+"<hr>";
            if(list.childElementCount===0){
                list.appendChild(item);
            }else{
                list.insertBefore(item,list.firstElementChild);
            }
            comment.value=null;
            username.value=null;
        }
        list.addEventListener('click',del,false);
        //删除 事件代理
        function  del(event){
            if(confirm("确定删除此条记录,删除操作无法恢复!")){
                var ul=event.currentTarget;
                var btn=event.target;
                var li=btn.parentElement;
                ul.removeChild(li);
            }
            return false;
        }
        //reset事件
        var reset=document.getElementById("reset");
        reset.addEventListener('click',rst,false);
        function rst(event){
            comment.value=null;
            username.value=null;
        }
    </script>
</div>
</body>
</html>

1.png

批改老师:天蓬老师批改时间:2019-07-30 09:32:16
老师总结:这个案例是考察你对基本的DOM操作的理解, 看起来你了解了,但还不是很熟练

发布手记

热门词条