图上是效果图；
图下为代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tops {
width: 50%;
height: 350px;
margin: auto;
padding: 20px;
border: solid 3px red;
}
.tops img {
width: 100px;
height: 100px;
}
textarea {
width: 90%;
height: 150px;
}
.bottoms {
width: 50%;
margin: auto;
padding: 20px;
min-height: 200px;
margin-top: 20px;
border: solid 3px red;
}
</style>
</head>
<body>
<div class="box">
<div class="tops">
<div>
<label>头像:</label>
<img src="img/a.PNG" >
<img src="img/b.PNG" >
<img src="img/c.PNG" >
<img src="img/d.PNG" >
</div>
<div>
<textarea maxlength="180" cols="30" rows="10" oninput="changeNum()"></textarea>
</div>
<div>
<button type="button" onclick="addArr()">发表</button>
<span>还可以输入<span class="maxLength"></span>个字,最多180个</span>
</div>
</div>
<div class="bottoms">
</div>
</div>
<script>
var imgs = document.querySelectorAll('.tops img')
var text = document.querySelector('textarea')
var bots = document.querySelector('.bottoms')
var maxNum = document.querySelector('.maxLength')
// console.log(imgs)
var imgSrc = '' // 创建一个空字符串放置选中的图片路径
for(var i = 0;i <imgs.length;i++){
imgs[i].onclick = function(){
for(var j = 0; j<imgs.length;j++){
imgs[j].style.border = ''
}
this.style.border = 'solid 2px red'
imgSrc = this.getAttribute('src')
}
}
var arr = []
// 本地存储
if (localStorage.arr0908) {
arr = JSON.parse(localStorage.arr0908)
showArr(arr)
}
// 添加事件
function addArr() {
if (imgSrc && text.value) {
var obj = {
imgSrc: imgSrc,
value: text.value,
time: getTime(),
id: new Date().getTime()
}
arr.push(obj)
localStorage.arr0908 = JSON.stringify(arr)
showArr(arr)
clearStyle()
changeNum()
} else if (!imgSrc) {
alert('请选择头像')
} else if (!text.value) {
alert('请输入内容')
} else {
alert('未知错误')
}
}
// 获取一个指定格式时间
function getTime() {
var time = new Date()
var str = time.toLocaleString()
return str
}
// 重置页面
function clearStyle() {
text.value = ''
for(var j = 0; j<imgs.length;j++){
imgs[j].style.border = ''
}
changeNum()
}
// 渲染
function showArr(arrFn) {
var str = ''
for (var i = 0; i < arrFn.length; i++) {
str += `
<div style='display: flex'>
<div style='width: 60px;'>
<img src="${arrFn[i].imgSrc}" style='width: 50px;height: 50px;'>
</div>
<div style='flex: 1;line-height: 50px;'>
${arrFn[i].value}
</div>
<div style='width: 60px;line-height: 50px;'>
<button type="button" onclick="delData(${arrFn[i].id})">删除</button>
</div>
</div>
<div style='border-bottom: solid 3px #eee;margin: 5px 0;'>
${arrFn[i].time}
</div>
`
}
bots.innerHTML = str
}
// 删除
function delData(id) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].id == id) {
arr.splice(i, 1)
}
}
localStorage.arr0908 = JSON.stringify(arr)
showArr(arr)
}
// 实时文字监听
var maxLength = text.getAttribute('maxLength')
maxNum.innerHTML = maxLength
function changeNum() {
var num = maxLength - text.value.length
if (num <= 0) {
num = 0
}
maxNum.innerHTML = num
}
</script>
</body>
</html>