首页 👨‍💻计算机,🚓JavaScript

案例模拟微博

一,页面框架

 <div class="w">
      <!-- 操作的界面 -->
      <div class="controls">
        <img src="./images/9.6/tip.png" alt="" /><br />
        <textarea
          placeholder="说点什么吧..."
          id="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount" id="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <!-- 微博内容列表 -->
      <div class="contentList">
        <ul id="list"></ul>
      </div>
    </div>

二,页面样式

    <style>
      * {
        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;
        position: relative;
      }

      .contentList li .info {
        position: relative;
      }

      .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;
      }

      .contentList li .the_del {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28px;
        cursor: pointer;
      }
    </style>

案例模拟微博

1,模拟数据

  var dataArr = [
        { name: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { name: '女娲', imgSrc: './images/9.5/02.jpg' },
        { name: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { name: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { name: '虞姬', imgSrc: './images/9.5/05.jpg' },
        { name: '张良', imgSrc: './images/9.5/06.jpg' },
        { name: '安其拉', imgSrc: './images/9.5/07.jpg' },
        { name: '李白', imgSrc: './images/9.5/08.jpg' },
        { name: '阿珂', imgSrc: './images/9.5/09.jpg' },
        { name: '墨子', imgSrc: './images/9.5/10.jpg' },
        { name: '鲁班', imgSrc: './images/9.5/11.jpg' },
        { name: '嬴政', imgSrc: './images/9.5/12.jpg' },
        { name: '孙膑', imgSrc: './images/9.5/13.jpg' },
        { name: '周瑜', imgSrc: './images/9.5/14.jpg' },
        { name: '老夫子', imgSrc: './images/9.5/15.jpg' },
        { name: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
        { name: '扁鹊', imgSrc: './images/9.5/17.jpg' },
        { name: '马可波罗', imgSrc: './images/9.5/18.jpg' },
        { name: '露娜', imgSrc: './images/9.5/19.jpg' },
        { name: '孙悟空', imgSrc: './images/9.5/20.jpg' },
        { name: '黄忠', imgSrc: './images/9.5/21.jpg' },
        { name: '百里玄策', imgSrc: './images/9.5/22.jpg' },
      ];

2,输入文字的时候,会显示具体输入的个数,并且限制在200个之间

let textarea = document.querySelector('#area');
      let useCount = document.querySelector('#useCount');
      
        textarea.oninput = function () {
        // 获取长度
        useCount.innerText = textarea.value.length;
      };
      let send = document.querySelector('#send');//发布按钮
      // 获取模板节点
      let tpl = document.querySelector('li[hidden]');//获取到隐藏标签
      let list = document.querySelector('#list');//微博内容列表
      send.onclick = function () {
        //  2.1: 判断如果内容为空,则提示不能输入为空,并且不做任何处理
        if (textarea.value.length === 0) {
          alert('输入内容不能为空');
          // 直接跳出函数
          return;
        }

3,克隆一个模板,并最终展示到页面上

 let newNode = tpl.cloneNode(true);//布尔值,若为true,则克隆oldNode及其子节点,否则只克隆oldNode本身
        newNode.hidden = false;

4,给模板添加用户和头像

newNode.querySelector('.content').innerText = textarea.value;//文本框内容
// 随机一个下标 获取里面的名称和图片路径
let count = Math.floor(Math.random() * dataArr.length);
newNode.querySelector('.username').innerText = dataArr[count].name;//将头像添加到文本框
newNode.querySelector('.userpic').src = dataArr[count].imgSrc;//将图片添加到文本框

5,动态时间

 newNode.querySelector('.send-time').innerText =
          '发布于' + formatDate(new Date());
          
  // 这个函数用来格式化时间
      function formatDate(date) {
        let yy = date.getFullYear();
        let mm = date.getMonth() + 1;
        let dd = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        return `${yy}年${addZero(mm)}月${addZero(dd)}日 ${addZero(h)}:${addZero(
          m
        )}:${addZero(s)}`;
      }
      function addZero(n) {
        return n < 10 ? '0' + n : n;
      }

6,在每一次创建模板的时候,获取到模板里面的删除按钮,注册一个点击事件

newNode.querySelector('.the_del').onclick = function () {
          list.removeChild(this.parentNode);//parentNode 属性以 Node 对象的形式返回指定节点的父节点。
        };
 // 将模板追加到list里面去
 list.insertBefore(newNode, list.children[0]);

// 清空模板内容 将计数器归0
textarea.value = '';
useCount.innerText = 0;
};

7,给表单域注册键盘抬起事件

 //onkeyup 事件会在键盘按键被松开时发生。当鼠标抬起时发生点击
      textarea.onkeyup = function (e) {
        if (e.keyCode === 13) {
          // 执行click操作
          send.onclick();
        }
      };

8,完整代码

// 需求1: 输入文字的时候,会显示具体输入的个数,并且限制在200个之间

 // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

      // 模拟数据
      var dataArr = [
        { name: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { name: '女娲', imgSrc: './images/9.5/02.jpg' },
        { name: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { name: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { name: '虞姬', imgSrc: './images/9.5/05.jpg' },
        { name: '张良', imgSrc: './images/9.5/06.jpg' },
        { name: '安其拉', imgSrc: './images/9.5/07.jpg' },
        { name: '李白', imgSrc: './images/9.5/08.jpg' },
        { name: '阿珂', imgSrc: './images/9.5/09.jpg' },
        { name: '墨子', imgSrc: './images/9.5/10.jpg' },
        { name: '鲁班', imgSrc: './images/9.5/11.jpg' },
        { name: '嬴政', imgSrc: './images/9.5/12.jpg' },
        { name: '孙膑', imgSrc: './images/9.5/13.jpg' },
        { name: '周瑜', imgSrc: './images/9.5/14.jpg' },
        { name: '老夫子', imgSrc: './images/9.5/15.jpg' },
        { name: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
        { name: '扁鹊', imgSrc: './images/9.5/17.jpg' },
        { name: '马可波罗', imgSrc: './images/9.5/18.jpg' },
        { name: '露娜', imgSrc: './images/9.5/19.jpg' },
        { name: '孙悟空', imgSrc: './images/9.5/20.jpg' },
        { name: '黄忠', imgSrc: './images/9.5/21.jpg' },
        { name: '百里玄策', imgSrc: './images/9.5/22.jpg' },
      ];
      let textarea = document.querySelector('#area');
      let useCount = document.querySelector('#useCount');
      
        textarea.oninput = function () {
        // 获取长度
        useCount.innerText = textarea.value.length;
      };
      let send = document.querySelector('#send');//发布按钮
      // 获取模板节点
      let tpl = document.querySelector('li[hidden]');//获取到隐藏标签
      let list = document.querySelector('#list');//微博内容列表
      send.onclick = function () {
        //  2.1: 判断如果内容为空,则提示不能输入为空,并且不做任何处理
        if (textarea.value.length === 0) {
          alert('输入内容不能为空');
          // 直接跳出函数
          return;
        }
        
        
        // 2.2: 克隆一个模板,并最终展示到页面上
        let newNode = tpl.cloneNode(true);//布尔值,若为true,则克隆oldNode及其子节点,否则只克隆oldNode本身
        newNode.hidden = false;
        
       // 3.2: 将模板的数据动态化
       
       // 将文本域的内容添加到当前模板的content里面去
        newNode.querySelector('.content').innerText = textarea.value;//文本框内容
        // 随机一个下标 获取里面的名称和图片路径
        let count = Math.floor(Math.random() * dataArr.length);
        newNode.querySelector('.username').innerText = dataArr[count].name;
        newNode.querySelector('.userpic').src = dataArr[count].imgSrc;
        // 将时间动态化
        newNode.querySelector('.send-time').innerText =
          '发布于' + formatDate(new Date());
         // 在每一次创建模板的时候,获取到模板里面的删除按钮,注册一个点击事件
        newNode.querySelector('.the_del').onclick = function () {
          list.removeChild(this.parentNode);
        };

        // 将模板追加到list里面去
        list.insertBefore(newNode, list.children[0]);

        // 清空模板内容 将计数器归0
        textarea.value = '';
        useCount.innerText = 0;
      };



文章评论

目录