JS 留言板

最新推荐文章于 2023-12-12 14:40:14 发布

珎珎啊

最新推荐文章于 2023-12-12 14:40:14 发布

阅读量276

点赞数

分类专栏：代码文章标签： js

本文链接：https://blog.csdn.net/qq_43363773/article/details/106680893

版权

代码专栏收录该内容

34 篇文章 0 订阅

订阅专栏

 <!-- 
         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">
          <li>
              <p>厉害 </p> 
              <button class="deleteBtn">删除</button>
          </li>
      </ul>
    <script>
        //1-
        let sendBtn = document.querySelector('.sendBtn');
        let ipt = document.querySelector('.ipt')
        let list = document.querySelector('.list')

        sendBtn.onclick = function(){
            console.log('点了发布')
            //2-创建li
            let newLi = document.createElement('li');

            // 创建p
            let oP = document.createElement('p');
            oP.innerHTML = ipt.value;
            newLi.appendChild(oP)

            // li添加到 list 里面
            list.appendChild(newLi)

            // 输入框清空
            ipt.value = '';

            // 创建删除按钮
            let deleteBtn = document.createElement('button');
            deleteBtn.innerHTML = '删除'
            deleteBtn.className='deleteBtn'
            newLi.appendChild(deleteBtn)


            deleteBtn.onclick = function(){
                this.parentNode.remove()
            }

            // 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()
                    
            //     }
            // }

        }
        //针对页面加载完毕，已经有点删除按钮
        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()
                
            }
        }

    </script>

  <!-- 
         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">
          <li>
              <p>厉害 </p> 
              <button class="deleteBtn">删除</button>
          </li>

          

      </ul>
    <script>
        //1-
        let sendBtn = document.querySelector('.sendBtn');
        let ipt = document.querySelector('.ipt')
        let list = document.querySelector('.list')

        sendBtn.onclick = function(){
            console.log('点了发布')
            // 拼字符串
            // 模板
            let str = `
            <li>
                <p>${ipt.value} </p> 
                <button class="deleteBtn">删除</button>
             </li>
             `
             list.innerHTML = list.innerHTML + str;

            //针对页面加载完毕，已经有点删除按钮
            let delBtns = document.querySelectorAll('.deleteBtn');
            console.log(delBtns)
            for(let i=0;i<delBtns.length;i++){
                delBtns[i].onclick = function(){
                    console.log(this.parentNode)//点击id按钮对应的li
                    this.parentNode.remove()
                    
                }
            }

           

        }
        //针对页面加载完毕，已经有点删除按钮
        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()
                
            }
        }

    </script>

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

珎珎啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 留言板

 <input type="text" class="ipt"> &lt.
复制链接

扫一扫