! 在这里插入图片描述如上图所示效果
如上图所示效果，在评论框中输入信息，信息按第二张图的顺序记录，代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>评论发表实例练习</title> <link rel="stylesheet" href="./评论发表实例.css"> </head> <body> <div class="box0"> <div class="top"> <label><input type="text" class="text1" placeholder="请输入评论内容，回车结束"></label> </div> <div class="bottom"> <div class="bot bot0"></div> <div class="bot bot1"></div> <div class="bot bot2"></div> <div class="bot bot3"></div> <div class="bot bot4"></div> <div class="bot bot5"></div> <div class="bot bot6"></div> <div class="bot bot7"></div> <div class="bot bot8"></div> <div class="bot bot9"></div> </div> </div> <script> let text1A=document.querySelector('.text1'); let botS=document.getElementsByClassName('bot'); let count=botS.length; text1A.onkeydown=function(event) { if (event.keyCode===13) { console.log('回车键触发'); count--; if (count<=0) { alert('不能继续写下去了'); return; } botS[count].style.display='block'; botS[count].innerText=text1A.value; text1A.value=''; } } //核心思路，利用下边的盒子block出来，将上边的盒子顶下去，所以要从最后一个盒子开始写 //或从第一个盒子开始记录，则是第二个盒子开始抵在下边，以此类推 </script> </body> </html>css样式用less写出，如下
.box0 { width: 300px; margin: 0 auto; .top { .text1 { height: 100px; width: 300px; box-sizing: border-box; //border: 0; //outline: none; } } .bottom { .bot { display: none; border: 1px solid grey; width: 300px; height: 50px; box-sizing: border-box; } .bot9 { display: block; } //&:hover { // .bot8 { // display: block; // } //} } }//核心思路，利用下边的盒子block出来，将上边的盒子顶下去，所以要从最后一个盒子开始写 //或从第一个盒子开始记录，则是第二个盒子开始抵在下边，以此类推
