标签：arr document js width tab maxLength var height 留言板
图上是效果图；
图下为代码：
<!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>标签：arr,document,js,width,tab,maxLength,var,height,留言板 来源： https://blog.csdn.net/weixin_59519449/article/details/120219235
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。