search

博客列表 >dom增删改，留言板应用

dom增删改，留言板应用

喜
喜原创
2022年07月29日 15:52:27497浏览

1.dom增删改


insertAdjacentElement 添加元素

insertAdjacentHTML与cloneNode 克隆节点

替换节点与删除节点

2.应用留言板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     .ly{
  16.         width: 900px;
  17.         margin: 0 auto;
  18.     }
  19.     textarea{
  20.         width: 100%;
  21.         height: 112px;
  22.         resize: none;
  23.         border-radius: 10px;
  24.         padding-top: 10px;
  25.         padding-left: 20px;
  26.         outline: none;
  27.         font-size: 18px;
  29.     }
  30.     .bott{
  31.         display: flex;
  32.         justify-content: flex-end;
  33.         align-items: center;
  34.     }
  35.     button{
  36.         width: 100px;
  37.         height: 30px;
  38.         background-color: #0084ff;
  39.         border: none;
  40.         color: #fff;
  41.         font-family: 宋体;
  42.         font-size: 14px;
  43.         font-weight: bold;
  44.         transition: all 0.5s;
  45.     }
  46.  button:hover {
  47.   background: rgb(0, 225, 255);
  48. }
  49.     p{
  50.         margin-right: 5px;
  51.         color: #666;
  52.     }
  53.     span{
  54.         color: #ff0000;
  55.         padding-right: 5px;
  56.     }
  57.     .info{
  58.         margin: 40px auto 0;
  59.     }
  60.     .xx{
  62.         width: 900px;
  63.         margin: 0 auto;
  64.         padding: 20px 0;
  65.     border-bottom: 1px dashed #ccc;
  66.     }
  67.     .xx .top{
  68.         display: flex;
  69.         justify-content: space-between;
  70.     }
  71.     .xx .left{
  72.         display: flex;
  73.         height: 84px;
  74.     }
  75.     .xx .left img{
  76.        height: 100%;
  77.         border-radius: 50%;
  78.     }
  79.     .xx .right{
  80.         margin-left: 20px;
  81.         align-self: center;
  82.     }
  83.     .xx .right h3{
  84.         font: bold 16px '宋体';
  85.     }
  86.     .xx .right p{
  87.         color: #aaa;
  88.         margin-top: 8px;
  89.     font-size: 12px;
  90.     }
  91.     .close span{
  92.         font-size: 28px;
  93.     }
  94.     .bottom{
  95.         padding-left: 100px;
  96.     color: #666;
  97.     word-break: break-all;
  98.     }
  99. </style>
  100. <body>
  101.     <div class="ly">
  102.         <div class="img">
  103.             <img src="./images/tip.png" alt="">
  104.         </div>
  105.         <textarea name="" id="" cols="30" rows="10" placeholder="说点什么吧..." maxlength="200"></textarea>
  106.        <div class="bott">
  107.         <p><span>0</span>/ 200</p>
  108.         <button>发布</button>
  109.        </div>
  110.     </div>
  112.     <div class="box1">
  113.         <div class="info">
  114.          </div>
  115.       </div>
  116.     </div>
  118.    <script>
  119.       let textarea=document.querySelector('textarea')
  120.       let span=document.querySelector('.bott span')
  122.       textarea.addEventListener('input',()=>span.innerHTML= textarea.value.trim().length)
  125.       let button=document.querySelector('.bott button')
  126.       button.addEventListener('click',()=>{
  127.          if(textarea.value.trim()===''){
  128.             textarea.value=''
  129.         span.innerText=0
  130.         alert('请输入内容')
  131.         textarea. focus()
  132.        return false
  133.          }
  135.          textarea.focus()
  136.          let xx=document.createElement('div')
  137.          xx.classList='xx'
  138.          xx.innerHTML=`
  139.          <div class="top">
  140.                  <div class="left">
  141.                   <div class="img"> <img src="https://img.php.cn/upload/avatar/000/991/210/62d10769ad48d159.jpg" alt=""></div>
  142.                  <div class="right">
  143.                      <h3>喜</h3>
  144.                      <p>${new Date().toLocaleString()}</p>
  145.                  </div>
  146.                  </div>
  147.       <div class="close">
  148.           <span>
  149.               X
  150.           </span>
  151.       </div>
  152.               </div>
  153.               <div class="bottom">
  154.                   <p>${textarea.value}</p>
  155.               </div>
  156.          `
  157.          document.querySelector('.info').insertAdjacentElement('afterBegin',xx)
  159.          textarea.value=null
  160.          span.innerHTML=0
  162.          let del=document.querySelector('.close span')
  163.          del.addEventListener('click',()=>document.querySelector('.info').removeChild(xx))
  164.       })
  166.       textarea.addEventListener('keyup',()=>{
  167.          if(event.key==='Enter')button.click()
  168.       })
  169.    </script>
  170. </body>
  171. </html>
上一条：轮播图/选项卡/数组API下一条：认识js的函数，常量，变量以及命名规则
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多