current position:Home>What is the specific idea to realize the comment function

What is the specific idea to realize the comment function

2022-02-02 20:50:59 CSDN Q & A

 <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 Copy of /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 Copy of /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"; // Create avatar  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 =" Comment on time &nbsp;&nbsp;"+ oDate.getFullYear()+" year "+(oDate.getMonth()+1)+" month "+oDate.getDate()+" Japan "+"&nbsp;&nbsp;<a href='javascript:;'> Delete </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">                        Your browser does not support it  video  label .        </video>    </div>    <br>    <!--  Demarcation line  -->    <hr>      <h2 align="center">&nbsp;&nbsp; Comment on </h2>    <div id="div1" >        <textarea cols="70" rows="8" id="txt"></textarea><br/>        <input type="button" value=" Comment on " id="btn1" />        <ul id="ul1"></ul>    </div> </body>



Refer to the answer 1:
  1. obtain input Value
  2. Dynamically create One Comment on dom (createElement,appendChild,removeChild wait dom operation )
  3. Add to Comment on list

This is mainly about investigation dom operation . Dynamically create delete dom




Refer to the answer 2:

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.primo.wiki/2022/02/202202022050581967.html

Random recommended