HTML开发与应用：利用css ,js ,html三种样式书写一个留言板。

<style type="text/css">
        #message_input{
            height: 30px;
        }

        div{
            border: solid 1px;
        }

    </style>
    <h1 align="center">留言板</h1>
    <body>
        <div style="width: 400px; height: 1800px; background-color: antiquewhite;margin: 0px auto;" >
            <div id="message_input">
                <input id="inputContent" type="text" placeholder="请输入内容。" maxlength="16" style="width: 330px; margin-right: 10px;"/>
                <button onclick="inputText()">提交</button>
            </div>
            <div id="outputContent" style="width: 350px; height: 1700px; background-color:aliceblue; margin-top: 30px; margin: 0px auto;">

            </div>
        </div>


        <div style="height: 20px; " contenteditable="true">


        </div>
    </body>
    <script type="text/javascript">

        var num = 0;//记录当前有多少留言


        function dele(t){


            //var pre_div = t.previousSibling;

            var divResult = document.getElementById("outputContent");
            /*var child=document.getElementById("result2");*/


            var parents = t.parentNode;
            var n = parseInt((parents.childNodes)[1].innerText);

            divResult.removeChild(parents);

            num--;
            countNum(n);

        }
        function inputText(){
            var inputContent=document.getElementById("inputContent").value;
            var outputContent=document.getElementById("outputContent");
            outputContent.innerHTML+="<div><div id='result2' style='width: 330px; height: 50px; background-color: aquamarine; margin-top: 30px; margin: 0px auto;'>"+inputContent+"</div><span class='count_num'></span><button onclick='dele(this)'>删除</button><input type='submit' onclick='make(this)' value='编辑'/></div>";
            document.getElementById("inputContent").value="";
            num++;
            countNum(num);
        }


        function countNum(n){
            var span_counts = document.getElementsByClassName("count_num");



            for(var i = n-1;i<span_counts.length;i++){

                span_counts[i].innerText=i+1;
            }
        }
        function make(t){

            //var divMake=document.getElementById("result2");
            var parents = t.parentNode;
        //  var content=(parents.childNodes)[0].innerText;
            //alert(parents.childNodes[0]);
            parents.childNodes[0].contentEditable="true";
            parents.childNodes[0].style.backgroundColor="red";

            t.value="保存";

            t.onclick=function(){

                save(t);
            }
        }




        function save(t){
            var parents = t.parentNode;
            parents.childNodes[0].contentEditable="false";
            t.value="编辑";
            parents.childNodes[0].style.backgroundColor="aquamarine";


        //  t.onclick=make;
            t.onclick=function(){

                make(t);
            }
        }


    </script>
</html>

这里写图片描述

我们接下来来分析每一个function。

第一个function：

function inputText(){
            var inputContent=document.getElementById("inputContent").value;
            var outputContent=document.getElementById("outputContent");
            outputContent.innerHTML+="<div><div id='result2' style='width: 330px; height: 50px; background-color: aquamarine; margin-top: 30px; margin: 0px auto;'>"+inputContent+"</div><span class='count_num'></span><button onclick='dele(this)'>删除</button><input type='submit' onclick='make(this)' value='编辑'/></div>";
            document.getElementById("inputContent").value="";
            num++;
            countNum(num);
        }

这个函数是点击提交按钮后触发的一种函数，该函数第一步先定位到输入框中的value。然后再定位到一个id为inputContent的div中。之后利用innerHTML属性将输入框中的内容放到div，之后就是点击提交后清空原来输入框，注意这里有一个全局变量num，它是用来计数的，来记录用户输入了多少个对话框（留言板）。
最后触发countNum(num)函数。

第二个function。

function dele(t){


            //var pre_div = t.previousSibling;

            var divResult = document.getElementById("outputContent");
            /*var child=document.getElementById("result2");*/


            var parents = t.parentNode;
            var n = parseInt((parents.childNodes)[1].innerText);

            divResult.removeChild(parents);

            num--;
            countNum(n);

        }

这个函数是用来删除的，点击删除按钮触发函数。注意这里运用了DOM的知识，利用父节点，来定位到div，然后利用第二个子节点定位到想要删除的div中，之后利用divResult.removeChild(parents)来进行元素节点的删除。删除后将表示元素个数的num–，并触发countNum(n)函数。

第三个function。

function make(t){

            //var divMake=document.getElementById("result2");
            var parents = t.parentNode;
        //  var content=(parents.childNodes)[0].innerText;
            //alert(parents.childNodes[0]);
            parents.childNodes[0].contentEditable="true";
            parents.childNodes[0].style.backgroundColor="red";

            t.value="保存";

            t.onclick=function(){

                save(t);
            }
        }

编辑函数，点击编辑按钮触发函数，点击后利用DOM进行定位，parents.childNodes[0].contentEditable=”true”，将div改成可以编辑文字的，变切让div变背景颜色，便是正在编辑状态，之后按钮的value值变为“保存“，再次点击触发之前的提交函数。

第四个function：

function countNum(n){
            var span_counts = document.getElementsByClassName("count_num");



            for(var i = n-1;i<span_counts.length;i++){

                span_counts[i].innerText=i+1;
            }

这个function是用来记录楼层信息的，那么先定位出要输入楼层信息的地方，之后利用for函数来进行排查，计算，也就是当哟用户该第三层时，前两层就不需要进行重新排位置，只需要对后面进行。

第五个function：

function save(t){
            var parents = t.parentNode;
            parents.childNodes[0].contentEditable="false";
            t.value="编辑";
            parents.childNodes[0].style.backgroundColor="aquamarine";


        //  t.onclick=make;
            t.onclick=function(){

                make(t);
            }
        }

也就是将保存按钮后，进行的保存操作，这里面有函数的嵌套。