search

博客列表 >实战评论区及自动回复

实战评论区及自动回复

子墨吖ฅฅ
子墨吖ฅฅ原创
2022年11月09日 14:25:23329浏览

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>

效果图

上一条：1. 实例演示对象与数组的解构赋值 和访问器属性,并描述与普通属性之间的区别与联系下一条：留言板案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多