demo-留言板（是有些问题的）

最新推荐文章于 2022-01-07 10:09:39 发布

咩有猫腻.

最新推荐文章于 2022-01-07 10:09:39 发布

阅读量141

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/106690511

版权

demo 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<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>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo-留言板（是有些问题的）

<body>  <input type="text" class="i.
复制链接

扫一扫

专栏目录