实现评论功能的具体思路是啥


 
<style type="text/css">
    .video{
        width:100%;
        height:500px;
    }
    #div1{
        margin: auto;
        border: 1px beige solid;
        width: 512px;
        text-align: left;
    }
    ul{
        list-style-type: none;
        list-style-image: url(../lxyzzy的副本/images/y.JPG);
    }
    .box{
        width: 400px;
        height: 150px;
        border: 1px darkgray solid;
        border-radius: 30px;
        position: relative;
    }
    .box .touxiang{
        width: 80px;
        height: 80px;
        background-size: 100% 100%;
        background-image: url(../lxyzzy的副本/images/y.JPG);
        position: absolute;
        left: 10px;
        top: 10px;
    }
    .box .nicheng{
        width: 80px;
        height:25px ;
        position: absolute;
        left: 10px;
        top: 100px;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
    }
    .box .pinglun{
        width: 290px;
        height: 80px;
        position: absolute;
        top: 10px; 
        right: 10px; 
    }
    .box .shijian{
        width: 200px;
        height: 25px;
        position: absolute;
        top: 100px;
        left:100px;
    }
</style>
<script>
    window.onload=function(){
        var oTxt = document.getElementById("txt");
        var oBtn = document.getElementById("btn1");
        var oUl1 = document.getElementById("ul1");
 
        oBtn.onclick=function(){
            var oBox = document.createElement("div");
            oBox.className = "box";
            //创建头像
            var oDiv = document.createElement("div");
            oDiv.className = "touxiang";
            oBox.appendChild(oDiv);
            var oDiv = document.createElement("div");
            oDiv.className = "nicheng";
            oDiv.innerHTML = "rich";
            oBox.appendChild(oDiv);
            var oDiv = document.createElement("div");
            oDiv.className = "pinglun";
            oDiv.innerHTML = oTxt.value;
            oBox.appendChild(oDiv);
            var oDiv = document.createElement("div");
            oDiv.className = "shijian";
            var oDate = new Date();
            //oDate.getFullYear
            oDiv.innerHTML ="评论时间&nbsp;&nbsp;"+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+"&nbsp;&nbsp;<a href='javascript:;'>删除</a>";
            oBox.appendChild(oDiv);
            oUl1.appendChild(oBox);
            /*oBox.insertBefore(oUl1,oDiv[0]);*/
            var aA = oDiv.getElementsByTagName("a");
            for(var i = 0;i<aA.length;i++)
            {
                aA[i].onclick=function(){
                    oDiv.removeChild(this.parentNode);
                }
            }
        }
    }
</script>
<body>
  <div>
        <video width="320" height="240" controls class="video">
            <source src="video/m.mp4" type="video/mp4">           
            您的浏览器不支持 video 标签。
        </video>
    </div>
    <br>
    <!-- 分界线 -->
    <hr>  
    <h2 align="center">&nbsp;&nbsp;评论</h2>
    <div id="div1" >
        <textarea cols="70" rows="8" id="txt"></textarea><br/>
        <input type="button" value="评论" id="btn1" />
        <ul id="ul1"></ul>
    </div> 
</body>
  1. 获取 input的值
  2. 动态创建 一个 评论 dom （createElement,appendChild,removeChild等等 dom操作）
  3. 添加到 评论 列表

这个主要就是考察 dom 操作 。 动态创建删除 dom