通过javascript实现微博发布

最新推荐文章于 2022-07-14 14:35:35 发布

黄昏终结者

最新推荐文章于 2022-07-14 14:35:35 发布

阅读量664

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_62181310/article/details/124599186

版权

通过增加节点,随机用户名和头像,实现最终发布效果

<!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>微博发布</title>
    <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>
  </head>

  <body>
    <div class="w">
      <div class="controls">
        <img src="./images/9.6/tip.png" alt="" /><br />
        <textarea
          placeholder="说点什么吧..."
          class="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button class="send">发布</button>
        </div>
      </div>
      <!-- 微博内容列表 -->
      <div class="contentList">
        <ul class="list">
          <!-- <li>
            <div class="info">
              <img class="userpic" src="./images/9.6/03.jpg" />
              <span class="username">死数据:百里守约</span>
              <p class="send-time">死数据:发布于 2020年12月05日 00:07:54</p>
            </div>
            <div class="content">死数据:111</div>
            <span class="the_del">X</span>
          </li> -->
        </ul>
      </div>
    </div>

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

      // 1. 用户输入的过程中去统计字数
      let content = document.querySelector("textarea");
      let count = document.querySelector(".useCount");
      // 监听用户的输入
      content.addEventListener("input", function () {
        // 将统计字数的结果显示出来
        count.innerHTML = this.value.length;
      });

      content.addEventListener("keyup", function (ev) {
        if (ev.keyCode === 13) {
          // console.log("测试");
          createWeibo();
        }
      });

      // 2. 生成新的留言内容
      let htmlStr = "";
      let list = document.querySelector(".list");

      // a) 监听用户是不是点击了 【发布按钮】
      let send = document.querySelector(".send");

      send.addEventListener("click", createWeibo);

      function createWeibo() {
        // d) 获取用户在表单中填写的内容
        const value = content.value;
        // e) 清空表单的内容
        content.value = "";
        count.innerHTML = 0;

        // 验证用户发布微博的内容是不是不为空
        if (value.trim().length === 0) {
          alert("请输入文本");
          return; // 程序到这儿就停止了
        }

        // f) 随机在 dataArr 中找到一个单元，用来显用户的头像和昵称
        let key = Math.floor(Math.random() * dataArr.length);
        // 随机取出的一个单元
        let user = dataArr[key];

        // g) 获取当间计算机时间
        let now = new Date();
        // 分别获取年、月、日、时、分、秒
        let year = now.getFullYear(),
          month = now.getMonth() + 1,
          date = now.getDate(),
          hour = now.getHours(),
          minute = now.getMinutes(),
          seconds = now.getSeconds();

        htmlStr = `
          <li>
            <div class="info">
              <img class="userpic" src="${user.imgSrc}" />
              <span class="username">${user.uname}</span>
              <p class="send-time">死数据:发布于 ${year}年${month}月${date}日 ${hour}:${minute}:${seconds}</p>
            </div>
            <div class="content">${value}</div>
            <span class="the_del">X</span>
          </li>
          `;

        // ul 当中上一次的所有 li
        htmlStr += list.innerHTML;

        // c) 把创建的 html 标签显示到页面
        list.innerHTML = htmlStr;
      }

      // 删除微博消息
      // 1.添加点击事件
      list.addEventListener("click", function (ev) {
        // 2.检测是哪个被点击
        if (ev.target.classList.contains("the_del")) {
          // 3.删除节点
          this.removeChild(ev.target.parentNode);
        }
      });
    </script>
  </body>
</html>

黄昏终结者

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过javascript实现微博发布

通过增加节点,随机用户名和头像,实现最终发布效果<!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" cont.
复制链接

扫一扫