发布微博案例(节点的创建与插入、事件委托)

最新推荐文章于 2022-05-07 16:39:05 发布

weixin_lqq

最新推荐文章于 2022-05-07 16:39:05 发布

阅读量118

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_52119040/article/details/119244002

版权

笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!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>
</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>
        <!-- <li>
          <div class="info">
              <img src="images/03.jpg">
              <span>宇智波鼬</span>
              <p>时间</p>
              <a href="#">删除</a>
          </div>
          <div class="content">
              内容
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</body>
</html>

/* 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 li {
  padding: 20px 0;
  border-bottom: 1px dashed #ccc;
}
.contentList li .info {
  position: relative;
}
.contentList li .info a {
  float: right;
  text-decoration: none;
  color: #333;
  margin-right: 10px;
}
.contentList li .info a:hover {
  color: red;
}
.contentList li .info span {
  position: absolute;
  top:15px;
  left:100px;
  font:bold 16px '宋体';
}
.contentList li .info p {
  position: absolute;
  top:40px;
  left: 100px;
  color:#aaa;
  font-size: 12px;
}
.contentList img {
  width: 80px;
  border-radius: 50%;
}
.contentList li .content {
  padding-left: 100px;
  color: #666;
  word-break: break-all;
}

  // js部分
  <script>
      let text = document.querySelector('textarea')
      let useCount = document.querySelector('.useCount')
      let send = document.querySelector('#send')
      let ul = document.querySelector('ul')
// 1. 留言框输入内容,将输入内容的长度赋值给usecount
      text.addEventListener('input',function () {
          useCount.innerHTML = text.value.length
        })
// 2. 点击发布按钮,将留言内容添加到ul中
      send.addEventListener('click',function () {
         // 先判断  如果输入字数不为0 ,则创建li添加到ul里
        if(text.value.length === 0) return
            //创建li
        let li = document.createElement('li')
            // 更改li的内容
        li.innerHTML = `
        <div class="info">
              <img src="images/03.jpg">
              <span>宇智波鼬</span>
              <p>${new Date().toLocaleString()}</p>
              <a href="#">删除</a>
          </div>
          <div class="content">
              ${text.value}
          </div>
        `
        // 插入到ul中
        // ul.appendChild(li)   // 每次添加li到ul内部的末尾
        ul.insertBefore(li, ul.children[0])   // 每次添加li到ul内蒙的最前面
        // 留言发布完成清空留言框,留言字数清零
        text.value = ''
        useCount.innerHTML = 0
        })

// 3. 点击删除链接,删除此条留言
        // 利用事件委托给ul添加事件监听
        ul.addEventListener('click',function (e) {
            // 找到事件对象,判断事件对象是不是a链接
            if(e.target.nodeName === 'A') {
                // 如果是a链接,删除a链接所在的此条留言(li)
                ul.removeChild(e.target.parentNode.parentNode)
            }
          })
        
  </script>

weixin_lqq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发布微博案例(节点的创建与插入、事件委托)

<!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&l
复制链接

扫一扫