• 留言板完整版(代码)及完整版解析


    css部分:

     #name{
                 width: 400px;
                 height:300px;
                 
             }

    HTML部分:

    <textarea id="name"></textarea><br/>
            <input type="button" value="点击提交">
            <ul>
                
            </ul>

    js部分:

    var input =document.querySelector('input');
            var textarea=document.getElementById('name');
            var uls=document.querySelector('ul');
            input.οnclick=function(){
                var text=textarea.value+'时间:'+new Date().toLocaleDateString();
               //创建ul里面的li
                if(textarea.value==''){
                    alert('不能输入空值');
                    return;
                }
               var lis=document.createElement('li');
               lis.innerHTML=text+"<a href='javascript:;'>删除</a>";
               var ul=document.querySelector('ul');
               ul.insertBefore(lis,ul.children[0]);
               //删除元素 删除的是当前的链接的li  它的父亲
            }    
               //利用监听事件实现删除效果
               //通过e获得父标签
               uls.addEventListener('click',function(e){
                   var tell=e.target.parentNode;
                   this.removeChild(tell);
               })

    解析部分:

    获取点击,文本域,ul元素,建立普通点击事件.根据需求,我们采用公用的获取当前时间的方法并且添加文本域内部的内容,使得传给一个
               接收变量是text作为值,在下面我们也对其设置一个判断语句,这个判断语句我们用来控制用户是否输入了内容,如果没有输入内容,我们
               提醒用户,让他重新输入,如果有内容,便继续向下执行内容,下面的是获取ul里面的li,根据上面的textarea.value可以判断出内容的长度,
               会自动生成一个li标签,获取li标签以后,我们还要对li标签里面添加一个a标签作为删除按钮.接着,再获取一个ul内容,切记,这里的ul是
               局部变量,上面的ul是全局变量,所以不同,这里获取的ul仅仅在内部才可以获取使用.我们将lis值放入ul中,insertBefore语句是获取父级
               将子级值放入ul的子级最前面(从外向里解析,里面是从左向右解析), 上面都执行完之后,我们在外面设置一个删除效果,这里绑定的是全局变量里的ul,采用监听事件的方式,function里面的(e)一个参数,
               下面我们获取当前a标签的父级那么就是li标签,最后我们再将父级标签设置为移除.用户点击删除即可实现删除啦,以上是全部的过程与解析

  • 相关阅读:
    ASP.Core3.1 WebAPI 发布到IIS
    PostgreSql索引相关知识总结
    读Densely Connected Pyramid Dehazing Network
    jvm 分析调优工具-学习笔记
    取数组中每个元素的最高位
    mybatis-spring的整合
    springboot vue街球社区网站java
    回归预测 | MATLAB实现RBF径向基神经网络多输入多输出预测
    在centos上配置FASTDFS文件系统
    力扣501 补9.13
  • 原文地址:https://blog.csdn.net/m0_59505309/article/details/125482430