模拟评论区

liu_ziqian

已于 2024-04-26 23:45:18 修改

阅读量110

点赞数 1

文章标签： javascript 前端 css

于 2024-04-26 23:44:24 首次发布

本文链接：https://blog.csdn.net/liu_ziqian/article/details/138234090

版权

本文详细展示了如何使用HTML和CSS构建一个简单的微博发布界面，包括文本输入验证、内容列表生成以及删除功能，同时涉及了JavaScript对DOM的操作和事件处理。

摘要由CSDN通过智能技术生成

css部分代码;

* {
  margin: 0;
  padding: 0;
}
 
ul {
  list-style: none;
}
 
.w {
  width: 900px;
  margin: 0 auto;
}
 
.controls textarea {
  width: 878px;
  height: 100px;
  resize: none;
  border-radius: 10px;
  outline: none;
  padding-left: 20px;
  padding-top: 10px;
  font-size: 18px;
}
 
.controls {
  overflow: hidden;
}
 
.controls div {
  float: right;
}
 
.controls div span {
  color: #666;
}
 
.controls div .useCount {
  color: red;
}
 
.controls div button {
  width: 100px;
  outline: none;
  border: none;
  background: rgb(0, 132, 255);
  height: 30px;
  cursor: pointer;
  color: #fff;
  font: bold 14px '宋体';
  transition: all 0.5s;
}
 
.controls div button:hover {
  background: rgb(0, 225, 255);
}
 
.controls div button:disabled {
  background: rgba(0, 225, 255, 0.5);
}
 
.contentList {
  margin-top: 50px;
}
 
.contentList ul {
  height: 800px;
}
 
.contentList li {
  /* display: none; */
  padding: 20px 0;
  border-bottom: 1px dashed #ccc;
  height: 60px;
}
 
.contentList li a {
  margin-left: 800px;
}

html框架：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/weibo.css">
  <script src="../发布微博案例/jquery-3.7.1.slim.js"></script>
</head>
 
<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <div class="contentList">
      <ul id="list">
      </ul>
    </div>
  </div>
  <script src="./index.js">
    const data =[
            {uname:'张三',imgSrc:'images/03.jpg'},
            {uname:'李四',imgSrc:'images/03.jpg'},
            {uname:'王麻子',imgSrc:'images/03.jpg'},
            {uname:'小刘',imgSrc:'images/03.jpg'},
 
];
let textarea = document.querySelector('textarea');
let useCount = document.querySelector('.useCount');
let btn = document.querySelector('#send');
let ul = document.querySelector('#list');
textarea.addEventListener('input', function () {
  useCount.innerHTML = this.value.length;
});
btn.addEventListener('click', function () {
  if (textarea.value.trim() === '') {
    textarea.value = '';
    useCount.innerHTML = 0;
    return alert('内容不能为空');
  }
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
 
  let index = getRandom(0, data.length - 1);
  let li = document.createElement('li');
  li.innerHTML = `
    <div class="info">
      <imgSrc class="imgs" src=${data[index].imgSrc}>
      <span class="username">${data[index].uname}</span>
      <button class="del">删除</button>
      <div class="content">${textarea.value}</div>
      <div class="send-time">${new Date().toLocaleString()}</div>
    </div>
  `
  let del = li.querySelector('.del');
  del.addEventListener('click', function () {
    ul.removeChild(li);
  });
  ul.insertBefore(li, ul.children[0]);
  textarea.value = '';
  useCount.innerHTML = 0;
});
  </script>
</body>
 
</html>