涉及到的技术
1.js中的获取元素
2.文本域自动获取光标
3.注册事件，给元素添加点击事件
4.生成一个随机数
5.渲染数据，遍历数据 数据拼接 数据的渲染
6.发送完之后 清除文本域的内容
7.按下确认键实现发布功能
8.监听文本域输入的字数
9.把发布的时间封装成一个函数，直接调用即可
<body>
<div class="w">
<!-- 操作的界面 -->
<div class="controls">
<img src="./images/9.6/tip.png" alt="" /><br />
<!-- maxlength 可以用来限制表单输入的内容长度 -->
<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">
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/01.jpg" />
<span class="username">名字</span>
<p class="send-time">发布于 时间</p>
</div>
<div class="content">内容</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' },
]
js中的获取元素
let area = document.querySelector('#area') //文本域
let useCount = document.querySelector('#useCount') //输入的字数
let send = document.querySelector('#send') //发送按钮
let ul = document.querySelector('ul') //等会要把创建的li元素追加到ul里面
文本域自动获取光标
// 文本域自动获取光标
area.focus()
注册事件，给元素添加点击事件
创建一个新的元素
生成一个随机数
渲染数据，遍历数据 数据拼接 数据的渲染
发送完之后 清除文本域的内容
// 注册事件，给元素添加点击事件，给发送添加点击事件
send.addEventListener('click', function () {
// 创建一个li元素
let li = document.createElement('li')
// 在模拟数据里面生成一个随机数
let random = parseInt(Math.random() * dataArr.length)
// 文本域的内容
let content = area.value
// 接着 判断用户是否输入文字，如果没有输入则设置发送不了的功能
if (content.trim().length === 0) {
alert('请输入内容再发送哦')
return
}
// 渲染数据，遍历数据 数据拼接 数据的渲染
// 创建好li元素之后，里面是一个空的标签，所以要在里面添加内容
li.innerHTML = `<div class="info">
<img class="userpic" src="${dataArr[random].imgSrc}" />
<span class="username">${dataArr[random].uname}</span>
<p class="send-time">发布于 ${timeFormat()}</p>
</div>
<div class="content">${content}</div>
<span class="the_del">X</span>`
// 我们有了li标签，并且也在里面添加好了内容，接下来就可以把它追加到ul元素里面（在最前面）啦！父元素.inserBefore
ul.insertBefore(li, ul.children[0])
// 点击关闭X这个按钮的时候，就删除整一个盒子
let del = document.querySelector('.the_del') //获取删除微博按钮的操作
del.addEventListener('click', function () {
ul.removeChild(li)
})
// 发送完之后 要清除文本域的内容
area.value = ''
useCount.innerText = 0
})
按下确认键实现发布功能
area.addEventListener('keyup', function (e) {
// console.log(e, 123);
if (e.key == 'Enter') {
send.click()
}
})
监听文本域输入的字数
area.addEventListener('input', function () {
let words = area.value.trim().length
useCount.innerText = words
})
把发布的时间封装成一个函数，直接调用即可
let timeFormat = function () {
let date = new Date()
//获取年份
let year = date.getFullYear()
//获取月份
let month = date.getMonth() + 1
//获取日期
let dates = date.getDate()
//获取小时
let hour = date.getHours()
//获取分钟
let minutes = date.getMinutes()
//获取秒数
let seconds = date.getSeconds()
return `${year}-${month}-${dates} ${hour}:${minutes}:${seconds}`
}
</script>
</body>
