js基础——简易微博发布

目标：简易微博发布

掌握webApi DOM基础操作

实现要求：

要求：

1. textarea里边输入文字 发布按钮旁边的字数增加
2. 点击发布按钮，把在 textarea输入的值打印在页面
3. 点击删除，删除发布的那条内容
4. 键盘的enter事件

实现步骤：

考察DOM基础、随机函数

实现：

1. textarea里边输入文字 把长度给到 字数
2. 添加按钮添加事件 渲染到页面中 ，每条新数据的添加，在最前面使用添加节点——父元素.insertBefore(需要添加的元素, 在哪个元素之前添加)
3. 每创建一个发布内容，就创建一个元素，使用document.createElement(“元素”);
4. 删除操作，使用删除节点操作 父元素.removeChild(子元素)

注意点：

1. 判断输入框是否有内容 使用trim()去掉字符串前后空格
2. 获取元素放在追加的前面，这样创建元素的同时顺便绑定删除事件
3. 删除按钮事件必须在点击事件里边，因为一开始页面没有删除按钮
4. **通过事件对象 e key: “Enter” **
5. 按下回车可以生成留言事件为keyup

 <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>

 // 简易微博发布实现步骤
    

   //案例：要求输出内容提交并显示
    //1、获取元素
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')
    let list = document.querySelector('#list')
    let sendBtn = document.querySelector('#send')

    // 3、输入框输入事件 用户输入事件 input
    area.addEventListener('input', function () {
      // 检测用户输入长度并赋值给useCount
      useCount.innerHTML = this.value.length
    })
    // 4、按钮点击事件  将输入的内容添加排列在下方
    sendBtn.addEventListener('click', function () {
      //判断输入框是否有内容 使用trim()去掉字符串前后空格
      if (area.value.trim() === '') {
        // 并将表单的value值为0
        area.value = '';
        useCount.innerHTML = 0;
        return alert('输入的内容不能为空')
      }
      // 有内容则返回
      //随机函数
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let random = getRandom(0, dataArr.length - 1)
      // 创建要插入的节点li
      var li = document.createElement("li");
      //把输入的内容赋值给li    
      li.innerHTML = `
            <li>
              <div class="info">
              <img class="userpic" src=${dataArr[random].imgSrc}>
              <span class="username">${dataArr[random].uname}</span>
              <p class="send-time"> ${new Date().toLocaleString()} </p>
              </div>
              <div class="content">${area.value}</div>
              <span class="the_del">X</span>
            </li>
        `
      //获取元素放在追加的前面，这样创建元素的同时顺便绑定删除事件
      // 删除按钮事件必须在点击事件里边，因为一开始页面没有删除按钮
      let the_del = li.querySelector('.the_del')
      the_del.addEventListener('click', function () {
        // 删除子节点
        list.removeChild(li)
      })
      // 在ul后面添加li  children[0]指的是ul的第一个孩子  
      //在元素的内容前面添加用方法insertBefore(需要添加的元素, 在哪个元素之前添加)
      list.insertBefore(li, list.children[0])
      //清空输入框内的内容
      area.value = '';
      useCount.innerHTML = 0;

    })

    //按下回车可以生成留言
    // 事件监听的三要素 事件源时输入框  事件是弹起
    area.addEventListener('keyup', function (e) {
      //怎么知道用户按下回车键
      // 通过事件对象 e key: "Enter" 
      if (e.key === 'Enter') {
        // 自动触发点击按钮
        send.click();
      }
    })