<body>
<!--
1-基本结构
2- js逻辑
分析有啥功能,就知道从哪下手
1-点击发布的按钮的时候,
2-根据输入框的内容创建li标签,li里面还要有内容 p,button
3-删除按钮 添加点击事件,点击的时候删除 按钮所在的li
-->
<input type="text" class="ipt">
<input type="button" value="留言" class="sendBtn">
<ul class="list"></ul>
<script>
//1-
let sendBtn = document.querySelector('.sendBtn');
let ipt = document.querySelector('.ipt')
let list = document.querySelector('.list')
//1-数据 转为 页面的html结构 查
//2- 留言的时候 更改数据 数组中添加对象,render页面 增
//3- 删除留言 数组中删除对象,render页面 删
let arr = [{
title: '今天天气很好!',
date: '2020-06-07T19:18:06.124Z'
}, //一个对象就是一条留言
{
title: '今天的真热!',
date: '2020-06-06T19:18:06.124Z'
}
]
// 数据 转为 页面的html结构
// 循环遍历 arr 数组, 根据数组中内容 去拼字符串
// let html = '';
// for(let i=0;i<arr.length;i++){
// let obj = arr[i]
// console.log(obj)
// //每个留言的obj 都要 产生一个 li
// html += `
// <li>${obj.title}</li>
// `
// }
// console.log(html)
// //将拼好的字符串放在 ul里面
// list.innerHTML = html
render()
//渲染 -跟数据转为页面
// 封装函数 一段代码要多次调用或者 将大段的代码 拆成几个函数
function render() {
let html = '';
for (let i = 0; i < arr.length; i++) {
let obj = arr[i]
console.log(obj)
//每个留言的obj 都要 产生一个 li
html += `
<li>
${obj.title}
<button class="deleteBtn">删除</button>
${obj.date}
</li>
`
}
console.log(html)
//将拼好的字符串放在 ul里面
list.innerHTML = html
//3-删除留言 给删除按钮加事件
let delBtns = document.querySelectorAll('.deleteBtn');
console.log(delBtns)
for (let i = 0; i < delBtns.length; i++) {
delBtns[i].onclick = function () {
console.log(this.parentNode)
// this.parentNode.remove()
console.log(arr)
// 删除数组中 留言对应的对象
console.log(i)
arr.splice(i, 1)
console.log(arr)
// 渲染页面
render()
}
}
// {
// let i=0;
// delBtns[i].οnclick= function(){
// console.log(i)//0
// }
// }
// {
// let i=1;
// delBtns[i].οnclick= function(){
// console.log(i)//1
// }
// }
}
sendBtn.onclick = function () {
//2 - 留言的时候更改数据, 往数组中添加对象
let now = new Date()
let o = {
title: ipt.value,
date: now.toString()
}
console.log(o)
arr.push(o)
console.log(arr);
//重复1 将数据转为 html结构
// let html = '';
// for(let i=0;i<arr.length;i++){
// let obj = arr[i]
// console.log(obj)
// //每个留言的obj 都要 产生一个 li
// html += `
// <li>${obj.title}</li>
// `
// }
// console.log(html)
// //将拼好的字符串放在 ul里面
// list.innerHTML = html
render()
}
</script>
</body>
demo-留言板(是有些问题的)
最新推荐文章于 2022-01-07 10:09:39 发布