模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
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 send = document.querySelector('#send') // 发布按钮
let area = document.querySelector('#area') // 文本域
let useCount = document.querySelector('#useCount') // 数字展示
let list = document.querySelector('#list') // 列表结构
area.focus()
// 2.实现微博的基本发布
send.addEventListener('click', function() {
// 2.1 收集用户输入的内容
let content = area.value.trim()
// 添加用户输入内容的判断
if (content.length == 0) {
alert('不要乱搞嘛')
return
}
// 2.2 创建一个li元素
let li = document.createElement('li')
// 2.3 随机获取一个用户信息，做为渲染的数据来源
let index = parseInt(Math.random() * dataArr.length)
// 2.4 根据用户的输入生成li元素的内容
li.innerHTML = `<div class="info">
<img class="userpic" src="${dataArr[index].imgSrc}" />
<span class="username">${dataArr[index].uname}</span>
<p class="send-time">发布于 ${dateFormat()}</p>
</div>
<div class="content">${content}</div>
<span class="the_del">X</span>`
// 2.5 将创建的li元素插入到指定的容器中
list.insertBefore(li, list.children[0])
// 为删除按钮绑定事件
let the_del = document.querySelector('.the_del')
the_del.addEventListener('click', function() {
// the_del.parentNode.remove()
// list.removeChild(li)
list.removeChild(the_del.parentNode)
})
// 发布之后，清空输入框
area.value = ''
})
// 3.添加输入框内容变化的监听
area.addEventListener('input', function() {
// area.value = area.value.trim()
useCount.innerText = area.value.trim().length
})
// 封装一个函数，用于日期格式化
let dateFormat = function() {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
</script>
</body>
</html>
