JS day33 留言板案列

最新推荐文章于 2024-04-23 08:43:56 发布

肝JOJO

最新推荐文章于 2024-04-23 08:43:56 发布

阅读量121

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/101610621

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

一.思路分析:

添加留言:
1.点击按钮之后,动态创建一个li,添加进ul里面
2.创建li的同时,把文本框内的值通过li.innerHTML赋值给li
3.发布的留言在最后用appendChild/在前面显示用insertBefore
删除留言:
1.当把文本域的值赋给li时,多添加一个删除的链接
2.需要把所有链接获取过来,点击当前链接时,删除当前链接所在的li
3.阻止跳转添加javascript:void(0);或者javascript:;

二.效果展示

在这里插入图片描述

三.代码

    <style>
        textarea{
            color:#999;
        }
        ul{
            width: 310px;
            height: 400px;
            background-color: antiquewhite;
            list-style: none;
        }
        li{           
            width:310px;
            
        }
    </style>

  <script type="text/javascript">
    window.onload=function(){
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        text.onfocus=function(){
            if(text.value==='请输入留言'){
                text.value="";
            }
            text.style.color='#333';
        }
        text.onblur=function(){
            if(text.value===''){               
                text.value='请输入留言'
                text.style.color='#999';
            }          
        }
        btn.onclick=function(){
            if(text.value=='请输入留言'){
                alert('请输入留言')
            }else{
                var li=document.createElement('li');  //创建元素
                li.innerHTML=text.value + "<a href='javascript:;'>删除</a>" ;  //将text值赋给li,并添加删除的链接
                ul.appendChild(li);  //将li放到ul子元素最后 
                //ul.insertBefore(li,ul.children[0]);  //放在ul第0个子元素前 
                text.value='';  //最后清空输入框
                var as=document.querySelectorAll('a');  //拿到所有的链接
                for(i=0;i<as.length;i++){    
                    as[i].onclick=function(){  //给a注册点击事件  
                        ul.removeChild(this.parentNode);   //删除a的父节点(ul的子节点)li  
                    }    
                }
                                
            }          
        }
    }
  </script>

<body>
    <ul>
    </ul>
    <textarea name="" id="" cols="30" rows="7" >请输入留言</textarea>
    <button>发布</button>    
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录