web（微博发布案例）

最新推荐文章于 2024-11-12 11:19:19 发布

Ajiang421

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量346

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Ajiang421/article/details/138229312

版权

示例：

1、检测空白内容

2、发布内容

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="./weibo.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="./weibo.js"></script>
</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;
    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;
}

js:

    <script>
        let dataArr = [{
            uname: '司马懿',
            imgSrc: '../发布微博案例/images/03.jpg'
        }, {
            uname: '女娲',
            imgSrc: '../发布微博案例/images/03.jpg'
        }, {
            uname: '百里守约',
            imgSrc: '../发布微博案例/images/03.jpg'
        }]
        let useCount = document.querySelector('.useCount')
        let send = document.querySelector('#send')
        let list = document.querySelector('#list')
        area.oninput = function() {
            useCount.innerText = area.value.length
        }
 
        send.onclick = function() {
            if (area.value.trim() == '') {
                alert('请输入合法内容')
            } else {
                let li = document.createElement('li')
                let index = parseInt(Math.random() * dataArr.length)
                li.innerHTML = `
                <div class="info">
                  <img class="userpic" src="${dataArr[index].imgSrc}" >
                  <span class="username">${dataArr[index].uname}</span>
                  <p class="send-time">发布于 ${Date().toLocaleString()}</p>
                </div>
                <div class="content">${area.value}</div>
                <span class="the_del">X</span>`
                list.insertBefore(li, list.children[0])
 
                li.querySelector('.the_del').onclick = function() {
                    list.removeChild(this.parentNode)
                }
            }
 
 
 
            area.value = ''
            useCount.innerText = 0
        }
    </script>