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


本文主要介紹關於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 联系我们: