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


    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标签,最后我们再将父级标签设置为移除.用户点击删除即可实现删除啦,以上是全部的过程与解析

  • 相关阅读:
    C++---多态原理
    第二十三章 javascript请求方式Ajax
    【云原生】Hive on k8s 环境部署
    管理学家杂志管理学家杂志社管理学家编辑部2022年第12期目录
    GPU服务器安装驱动、cuda和cudnn和tensorflow
    知识库搭建最简单的方法:登录、创建、优化,就这三步!
    TS+elementUI的表格做form校验写法(手机/邮箱号验证)
    Find My技术|智能防丢还得看苹果Find My技术
    12.ROS编程学习:ROS常用指令
    java计算机毕业设计高校考务管理MyBatis+系统+LW文档+源码+调试部署
  • 原文地址:https://blog.csdn.net/m0_59505309/article/details/125482430