Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战评论区及自动回复
Blogger Information
Blog 28
fans 0
comment 0
visits 11649
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战评论区及自动回复
子墨吖ฅฅ
Original
330 people have browsed it

JS部分

  1. const insertComment = function (ele,isBtn = false) {
  2.     if (event.key === 'Enter' || isBtn) {
  3.         // 1. 非空判断
  4.         if (ele.value.length === 0) {
  5.             // 提示用户
  6.             alert('留言不能为空');
  7.             // 重置焦点
  8.             ele.focus();
  9.             // 直接返回
  10.             return false;
  11.         }
  13.         const ul = document.querySelector('.container_body');
  14.         ele.value  = `<div class="personal_body"><div class="comment_body">${ele.value}</div>`
  15.         ele.value += `<div class="submit_del"><button onclick="del(this.parentNode)">删除评论</button></div>`;
  16.         ul.insertAdjacentHTML(`afterend`, `${ele.value}<div class="zdhf">自动回复内容</div><br><hr>`);
  18. // 3. 清空输入框
  19.         ele.value = null;
  20.     }
  21. };
  22. submit_btn.onclick = (e)=>{
  23.     const text = document.getElementById("pl")
  24.     insertComment(text,true);
  25. }
  26. // 删除
  27. const del = function (ele) {
  28.     console.log(ele)
  29.     return confirm('是否删除?') ? (ele.parentNode.outerHTML = null) : false;
  30. };

CSS部分

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .container{
  6.     display: grid;
  7.     place-content: center;
  8. }
  9. .main{
  10.     display: grid;
  11. }
  12. .comment,.submit,.comment_body{
  13.     background-color: lightskyblue;
  14.     padding: 5px;
  15. }
  16. .comment{
  17.     width: 400px;
  18.     height: 200px;
  19.     border-radius: 30px 30px 0 0;
  20.     display: grid;
  21. }
  22. .comment textarea{
  23.     width: 380px;
  24.     height:190px;
  25.     border: none;
  26.     border-radius: 10px;
  27.     display: grid;
  28.     place-self: center center;
  29. }
  30. .submit{
  31.    width: 400px;
  32.    border-radius: 0 0 30px 30px;
  33.    display: grid;
  34. }
  35. .submit button{
  36.     background-color: pink;
  37.     border: none;
  38.     border-radius: 30px;
  39.     padding: 10px;
  40.     display: grid;
  41.     place-self: center center;
  42. }
  43. input{
  44.     border: none;
  45.     border-radius: 10px;
  46. }
  48. /*接收评论区部分*/
  49. .container_body{
  50.     width: 400px;
  51.     margin-top: 30px;
  52.     display: grid;
  53.     place-content: center;
  54. }
  55. .personal_body{
  56.     display: grid;
  57.     place-self: center center;
  58. }
  59. .comment_body{
  60.     width: 400px;
  61.     min-height: 50px;
  62.     border-radius: 30px;
  63.     display: grid;
  64.     place-self: center center;
  65.     text-align: center;
  66. }
  67. .submit_del{
  68.     width: 400px;
  69.     border-radius: 0 0 30px 30px;
  70.     display: grid;
  71.     place-self: center center;
  72.     text-align: center;
  73. }
  74. .submit_del button{
  75.     border: none;
  76.     background-color: pink;
  77.     border-radius: 30px;
  78.     padding: 10px;
  79. }
  81. .zdhf{
  82.     width: 400px;
  83.     min-height: 50px;
  84.     background-color: lightgreen;
  85.     border-radius: 30px;
  86.     margin-top: 5px;
  87.     display: grid;
  88.     place-self: center center;
  89.     text-align: center;
  90. }

HTML部分

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>实战评论功能</title>
  9. </head>
  10. <link rel="stylesheet" href="work.css">
  11. <body>
  12. <section class="container">
  13.     <h2>评论区</h2>
  14. <div class="main">
  15.     <div class="comment">
  16.         <textarea name="pl" id="pl" cols="30" rows="10" placeholder="请输入你的评论内容" onkeydown="insertComment(this)"></textarea>
  17.     </div>
  18.     <div class="submit">
  19.     <button type="submit" id="submit_btn">提交评论/或按回车提交</button>
  20.     </div>
  21. </div>
  22. </section>
  23. <section class="container_body">
  25. </section>
  26. </body>
  27. <script src="work.js"></script>
  28. </html>

效果图

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：很好, 效果不错, 没什么问题
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post