微博发布案例

最新推荐文章于 2024-07-12 09:36:48 发布

abbjq123

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量881

点赞数 21

文章标签： javascript

本文链接：https://blog.csdn.net/abbjq123/article/details/138227802

版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</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: darkgray;

}

.controls div .useCount {

color: red;

}

.controls div button {

width: 100px;

outline: none;

border: none;

background-color: blue;

height: 30px;

cursor: pointer;

color: azure;

font: bold 14px '宋体';

transition: all 0.5s;

}

.controls div button:hover {

background-color: aqua;

}

.controls div button:disabled {

background-color: aqua;

}

.contentList {

margin-top: 50px;

}

.contentList ul {

height: 800px;

}

.contentList li {

/* display: none; */

padding: 20px 0;

border-bottom: 1px dashed #ccc;

height: 60px;

}

.contentList li a {

margin-left: 800px;

}

</style>

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

let textarea = document.querySelector('textarea');

let useCount = document.querySelector('.useCount');

let btn = document.querySelector('#send');

let ul = document.querySelector('#list');

textarea.addEventListener('input', function () {

useCount.innerHTML = this.value.length;

});

btn.addEventListener('click', function () {

if (textarea.value.trim() === '') {

textarea.value = '';

useCount.innerHTML = 0;

return alert('内容不能为空');

}

function getRandom(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

let index = getRandom(0, data.length - 1);

let li = document.createElement('li');

li.innerHTML = `

<div class="info">

<img class="imgs" src=${data[index].imgSrc}>

<span class="username">${data[index].uname}</span>

<button class="del">×</button>

<div class="content">${textarea.value}</div>

<div class="send-time">${new Date().toLocaleString()}</div>

</div>

`

let del = li.querySelector('.del');

del.addEventListener('click', function () {

ul.removeChild(li);

});

ul.insertBefore(li, ul.children[0]);

textarea.value = '';

useCount.innerHTML = 0;

});

</script>

</body>

</html>