javascript实现留言功能

原理：

1.用户在留言框输入留言

2.利用textarea的value属性获取到用户输入的留言

3.动态创建一个li

4.将获取的留言打包成html存到li中

5.根据需要添加删除留言、统计留言数量等功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的留言板</title>
    <style type = "text/css">
        *{
            padding:0;
            margin:0;
        }
        textarea {
            width:320px;
            height:80px;
            background:whitesmoke;
            font-size:16px;
        }
        span:hover {
            cursor:pointer;
        }
    </style>
</head>
<body>
    <h1>简单留言板</h1>
    <div id = "box">
        <!--通过js实现根据用户的输入动态创建一个存放用户留言的li，并且允许用户删除留言-->
    </div>
    <label>
        <textarea id = "msg" rows = "5" cols = "42"></textarea>
    </label>
    <input type = "button" id = "btn" value = "留言">
    <button id = "calc" onclick = calc()>统计</button>
</body>
    <script type = "text/javascript">
        var box = document.getElementById("box");
        var ul = document.createElement("ul");
        box.appendChild(ul);
        var btn = document.getElementById("btn");
        var msg = document.getElementById("msg");
        var n = 0;
        btn.onclick = function(){
            if(msg.value === ""){
                alert("请输入内容")
            } else{
                n++;
                var li = document.createElement("li");
                li.innerHTML = msg.value + "  "+"<span>X</span>";
                var lis = document.getElementsByTagName("li");
                if(n === 1){
                    ul.appendChild(li);
//                    如果是第一条留言则用appendChild
                }else{
                    ul.insertBefore(li,lis[0]);
//                    最新的留言总在第一条显示
                }
                msg.value = "";
//                重置文本框
                var span = document.getElementsByTagName("span");
                for(var i = 0;i<span.length;i++){
                    span[i].onclick = function(){
                        ul.removeChild(this.parentNode);
                        n--;
                    }
                }
            }
        };
        function calc(){
            alert("一共有"+n+"条留言")
        }
    </script>
</html>

 

posted on 2018-04-11 17:13  Tarantino  阅读(8288)  评论(0)  编辑  收藏  举报

导航