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


本文主要介绍关于javascript,html,前端的知识点,对【留言板完整版(代码)及完整版解析】和【代码留言板留言大全】有兴趣的朋友可以看下由【共创splendid--与您携手】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的【JavaScript,前端,HTML+css】相关技术问题。

代码留言板留言大全

css部分:

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

HTML部分:



?? ??? ?
?? ??? ?


    ?? ??? ??? ?
    ?? ??? ?

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

本文《留言板完整版(代码)及完整版解析》版权归共创splendid--与您携手所有,引用留言板完整版(代码)及完整版解析需遵循CC 4.0 BY-SA版权协议。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: