html留言功能 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .div{width: 500px; min-height: 300px; border: 1px solid red; margin: auto; margin-top: 200px;}
        .div .lyb{width: 90%; margin: auto; display: block; border-bottom: 1px solid red; padding: 5px 0px;}
        .div .div1{width: 90%; border: 1px solid red; margin: 5px auto;}
        .div .div1 p{width: 100%; padding: 5px 0px; height: 30px; line-height: 30px; }
        .div .div1 ul{width: 100%;}
        .div .div1 ul li{width: 100%; height: 30px; padding: 5px 0px; line-height: 30px; list-style: none;margin-bottom: 10px; background: blanchedalmond;}
        #wbk{resize: none; width: 90%;margin: auto; height: 100px; display: block;}
        #btn{width: 90%; height: 100px; margin: auto; display: block; margin-top: 5px;}
        a{float: right}
        span{float: right;}
    </style>
</head>
<body>
    <div class="div">
        <p class="lyb">留言板</p>
        <div class="div1">
            <p class="p">请输入内容</p>
            <ul>
                
            </ul>
        </div>
        <textarea id="wbk"></textarea>
        <input id="btn" type="button" value="发布留言"  />
    </div>
    <script>
        var p = document.getElementsByClassName("p")[0];
        var ul = document.getElementsByTagName("ul")[0];
        var wbk = document.getElementById("wbk");
        var btn = document.getElementById("btn");
        var num = 0;
        btn.onclick = function(){
            if(wbk.value.length != 0){
                p.style.display = "none";
                var li = document.createElement("li");
                var em = document.createElement('em');
                var a = document.createElement("a");
                var span = document.createElement("span");
                
                li.innerHTML = wbk.value;
                li.insertBefore(em,li.firstChild);
                
                
                a.innerHTML = "点击删除";
                a.setAttribute("href","javascript:void(0)");
                li.appendChild(a);
                
                span.innerHTML = "第" + num + "个";
                li.appendChild(span);
                
                
                wbk.value = "";
                ul.appendChild(li);
                
                fn1();
                fn2();
            }else{
                alert("请输入内容")
            }
        }
        
        function fn1(){
            var ali = document.getElementsByTagName('li');
            var ee = document.getElementsByTagName('em');
            for(var i=0;i<ali.length;i++){
                ee[i].innerHTML = i + 1 + ".";
            }
            
            var ss = document.getElementsByTagName('span');
            for(var i=0;i<ali.length;i++){
                ss[i].innerHTML = "第" + (i + 1) + "个";
            }
            if(ali.length == 0){
                p.style.display = "block";
            }
            
        }
        function fn2(){
            var aa = document.getElementsByTagName("a");
            for(var i=0;i<aa.length;i++){
                aa[i].onclick = function(){
                    this.parentNode.parentNode.removeChild(this.parentNode);
                    fn1();
                }
                
            }
        }
        
        
        
        
    </script>
</body>
</html>

 

 

Document

留言板

请输入内容

posted on 2017-09-14 16:40  Honey_Badger  阅读(2525)  评论(1)  编辑  收藏  举报

导航

Copyright © 2017 Honey_Badger
github