Beata156 2021-12-17 11:01 采纳率: 75%
浏览 28
已结题

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


 
<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条回答 默认 最新

  • 崽崽的谷雨 2021-12-17 11:07
    关注
    1. 获取 input的值
    2. 动态创建 一个 评论 dom （createElement,appendChild,removeChild等等 dom操作）
    3. 添加到 评论 列表

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月5日
  • 已采纳回答 11月27日
  • 创建了问题 12月17日

悬赏问题

  • ¥15 win2012磁盘空间不足,c盘正常，d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开，官网首页进不去，显示无法访问此页面，求解决方法
  • ¥15 关于smbclient 库的使用
  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启