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>

巴特西

javascript实现留言功能

最新文章

热门文章