20250702-12

把回复功能完善了整篇课程也是跟着学了一半了 css写的真痛苦顺便在gh扒了点代码把博客首页装饰了一下回复功能的练习代码如下
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    background-color: #00d9ff;
  }

  .avatar {
    flex-shrink: 0;
    display: block;
    width: 70px;
    height: 70px;
    background-color: pink;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
    border: 2px solid #4f4f4f;
  }

  .head {
    display: flex;
    width: 400px;
    height: 70px;
    gap: 10px;
  }

  textarea {
    background-color: rgb(222, 222, 222);
    font-size: 20px;
    font-weight: bolder;
    flex: 1;
    border: 2px solid #4f4f4f;
    border-radius: 4px;
    height: 27px;
    resize: none;
    transition: all 0.3s;
  }

  .confirm {
    height: 33px;
    border-radius: 6px;
    border: 2px solid #4f4f4f;
    background-color: pink;
    transition: all 0.3s;
  }

  .tx {
    color: #4f4f4f;
    opacity: 0;
    width: 80px;
    text-align: right;
    position: absolute;
    top: 85px;
    left: 270px;
    transition: all 0.3s;
  }

  #list {
    background-color: pink;
    width: 1350px;
    border: 3px solid #ffffff;
    padding: 10px;
    margin: 35px;
    border-radius: 20px;
  }

  .comment {
    border: 2px solid#ff6982;
    border-radius: 20px;
    background-color: aliceblue;
    font-size: 30px;
    max-height: auto;
    max-width: 1200px;
    width: auto;
    padding: 10px;
    word-wrap: break-word
  }

  .body {
    align-items: start;
    display: flex;
    margin-top: 10px;
    border-radius: 30px;
  }

  .name {
    display: flex;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: bolder;
    gap: 20px;
  }

  .bodycontent {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .gap {
    text-align: right;
    width: 80px;
    font-size: 20px;
    font-weight: bolder;
  }

  .failed {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    height: 70px;
    width: 200px;
    border-radius: 20px;
    border: 1px solid #4f4f4f;
    background-color: #ff748b;
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
  }
</style>

<body>
  <div class="failed" id="none">发布内容不能为空</div>
  <div class="failed" id="overword">发布字数超过限制</div>

  <div class="head">
    <div class="avatar"></div>
    <textarea type="text" class="text"></textarea>
    <button class="confirm">发布</button>
    <span class="tx">0/200字</span>
  </div>

  <div id="list">


    <div class="area">

      <div class="body">
        <div class="avatar"></div>
        <div class="bodycontent">
          <div class="name">
            <div class="uname">陈睿</div>
          </div>
          <div class="comment">你所热爱的，就是你的生活</div>
        </div>
      </div>

      <div class="body">
        <div class="gap">回复：</div>
        <div class="avatar"></div>
        <div class="bodycontent">
          <div class="name">
            <div class="uname">蒙古上单</div>
            <div>回复：</div>
            <div>陈睿</div>
          </div>
          <div class="comment">柠檬什么时候熟啊</div>
        </div>
      </div>

    </div>


    <div class="area">

      <div class="body">
        <div class="avatar"></div>
        <div class="bodycontent">
          <div class="name">
            <div class="uname">陈睿</div>
          </div>
          <div class="comment">B站可能会倒闭，但永远不会变质</div>
        </div>
      </div>

      <div class="body">
        <div class="gap">回复：</div>
        <div class="avatar"></div>
        <div class="bodycontent">
          <div class="name">
            <div class="uname">吓我一跳释放忍术</div>
            <div>回复：</div>
            <div>陈睿</div>
          </div>
          <div class="comment">小陈，又在上班摸鱼了</div>
        </div>
      </div>

      <div class="body">
        <div class="gap">回复：</div>
        <div class="avatar"></div>
        <div class="bodycontent">
          <div class="name">
            <div class="uname">一刀一刀燃烧刀</div>
            <div>回复：</div>
            <div>吓我一跳释放忍术</div>
          </div>
          <div class="comment">唉，六级号可惜可惜</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const textarea = document.querySelector('textarea')
    const tx = document.querySelector('.tx')
    const button = document.querySelector('.confirm')
    const list = document.getElementById('list')
    const none = document.querySelector('#none')
    const overword = document.querySelector('#overword')
    let user = ''
    let area = ''
    let username = ''

    textarea.addEventListener('focus', function () {
      textarea.style.height = '70px'
      button.style.height = '77px'
      tx.style.opacity = 1
    })
    textarea.addEventListener('blur', function () {
      textarea.style.height = '27px'
      button.style.height = ''
      tx.style.opacity = 0
    })
    textarea.addEventListener('input', function () {
      tx.innerHTML = `${textarea.value.length}/200字`
    })
    button.addEventListener('mouseenter', function () {
      button.style.backgroundColor = 'rgb(222, 222, 222)'
    })
    button.addEventListener('mouseleave', function () {
      button.style.backgroundColor = 'pink'
    })
    textarea.addEventListener('keydown', function (e) {
      if (e.key === 'Enter')
        if (username == '')
          output()
        else reply()
    })
    button.addEventListener('click', function () {
      if (username == '')
        output()
      else reply()
    })
    document.addEventListener('click', function (e) {
      if (e.target.className === 'body') {
        if (user != '') {
          user.style.backgroundColor = 'pink'
        }
        user = e.target
        user.style.backgroundColor = '#ff6982'
        area = user.parentElement
        username = user.querySelector('.name .uname')
      }
      else if (e.target.className == 'confirm' || e.target.className == 'text') { }
      else {
        username = ''
        user.style.backgroundColor = 'pink'
      }
      console.log(username)
    })


    function output() {
      let textcontent = textarea.value
      if (textcontent === '') {
        none.style.opacity = 1
        setTimeout(() => {
          none.style.opacity = 0
        }, 1500);
      }
      else if (textcontent.length > 200) {
        overword.style.opacity = 1
        setTimeout(() => {
          overword.style.opacity = 0
        }, 1500);
      }
      else {
        list.insertAdjacentHTML('beforeend', `
        <div class="area">
      <div class="body">
        <div class="avatar"></div>
        <div class="bodycontent">
         <div class="name"><div class="uname">${uname = '用户9527'}</div></div>
          <div class="comment">${textcontent}</div>
        </div>
      </div>
      </div>
      `)
        textarea.value = ''
      }
    }

    function reply() {
      let textcontent = textarea.value
      if (textcontent === '') {
        none.style.opacity = 1
        setTimeout(() => {
          none.style.opacity = 0
        }, 1500);
      }
      else if (textcontent.length > 200) {
        overword.style.opacity = 1
        setTimeout(() => {
          overword.style.opacity = 0
        }, 1500);
      }
      else {
        area.insertAdjacentHTML('beforeend', `
      <div class="body">
        <div class="gap">回复：</div>
        <div class="avatar"></div>
        <div class="bodycontent">
          <div class="name"><div class="uname">${uname = '用户9527'}</div><div>回复：</div><div>${username.innerHTML}</div></div>
          <div class="comment">${textcontent}</div>
        </div>
      </div>
      `)
        textarea.value = ''
      }
    }
  </script>
</body>

</html>
posted @ 2025-07-02 22:17 Lee_sz 阅读(17) 评论(0) 收藏举报
刷新页面返回顶部
Leesz

20250702-12

公告
