當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript(WebAPI)

發布時間：2023/12/8 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript(WebAPI) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.背景知識：

1 文檔：一個頁面就是一個文檔，用document來表示；

2 元素:頁面中的所有標簽都可以成為元素，用element來表示；

3 節點：網頁中的所有部分都可以成為節點

4 DOM樹：本質上提供了一組一系列的函數，讓我們可以操作網頁內容，網頁結構，網頁樣式，所以一個頁面的結構是一個樹形結構，稱為DOM樹；

所以說DOMAPI就是為了操作HTML頁面中的各種元素，這里面有屬性和方法；一個DOM樹上有很多的對象，所以我們要先選中這個對象，然后再進行操作

2.獲取元素：

獲取元素：這兩個類中的參數都是字符串類型，這個字符串是一個CSS選擇器，對于他們的區別，例如在參數中加一個div

1）querySelector:就會返回多個被選元素中的第一個，也就是說第一個出現的div

2) querySelectorAll:就會把選中的所有帶div的多個，以數組的形式全部返回回來

這兩個方法都是基于document這個實例來調用的，得到的效果是相當于是在當前頁面的全局中來查找符合要求的元素；

舉個例子：

<body><div class="father"><div class="child1">child1</div><div class="child2">child2</div><div class="child3">child3</div></div><script>//選中的結果是一個元素let a=document.querySelector("div");console.log(a);let b=document.querySelectorAll("div");console.log(b);</script>

事件：一些復雜的程序，往往要涉及到一些組件之間的通信，事件機制就是一種非常典型，也是一種非常非常常見的組件之間通信的機制；

事件也是用戶和程序之間交互的橋梁,當用戶進行了某些操作時也會引發事件，例如鼠標點擊，鼠標拖動，鍵盤按下，滑動屏幕

事件源：哪個元素觸發的；

事件類型：是點擊選中還是修改？

事件處理程序：進一步如何進行處理，往往是一個回調函數；

<input type="button" value="我是一個按鈕"><script>let a=document.querySelector("input"); //事件的注冊，綁定一個事件 //on 在xxx的時候a.onclick=function(){alert("hello");}</script> 所以當我們點擊這個按鈕的時候，就會觸發這個點擊事件，就會觸發顯示hello 這里面的button就是事件源，click就是事件的類型通過onclick屬性就可以關聯到一個具體的事件處理函數，當button觸發了click事件，就會自動調用onclick對應的函數

3.操作元素

1 獲取/修改元素的內容，最里面的，可能是一個文本，一個圖片，還可能是一個鏈接，還可能是一個HTML片段；

就會用到innerHTNL

1>>舉個例子：文本轉換，文本轉換成超鏈接

<div class="one">hello</div><input type="button" value="點擊按鈕，修改文本"><script> //選中button元素，和字體的元素，因為我們要點擊的是按鈕，我們就可以為按鈕注冊一個點擊事件 let button=document.querySelector('input'); //這里面的內容只可以寫input，不可以寫成button，因為這里面這可以是選擇器 button.onclick=function(){let text=document.querySelector('.one');text.innerHTML="我想有個家"; }</script> 當我們點擊按鈕的時候，字體就會發生變化

<div class="one">hello</div><input type="button" value="點擊按鈕，修改文本"><script>//選中button元素，和字體的元素，因為我們要點擊的是按鈕，我們就可以為按鈕注冊一個點擊事件let button=document.querySelector('input');//這里面的內容只可以寫input，不可以寫成button，因為這里面這可以是選擇器button.onclick=function(){let text=document.querySelector('.one');text.innerHTML='<a href="http://www.sougou.com">我是一個超鏈接</a>';}</script> 當我們點擊hello的時候，文本就會轉化成一個超鏈接了

2>>下面我們來實現一個自加計數器：

1)保證0 的這個背景和按鍵的這個背景范圍的高度和等于父親的背景，0的背景是一個div標簽，按鍵的一個背景是一個div標簽,他們都是獨占一行的；

2)0背景范圍和按鍵范圍都是在父親元素里面，但是在父親背景里面是不可以改成彈性布局的，因為改成彈性布局況且有多個元素是專門用來控制水平布局的

3)既然無法通過彈性布局控制元素水平垂直居中，那么就通過margin:0 auto;來控制在他們所在的列里面水平居中

顯示的結果是：

?2)修改操作元素屬性

HTML中的指定的屬性，最終都會體現在JS中，所以說HTML中的元素在JS中會有一個對應的對象，通過queryselector()可以把這個對象獲取出來，這個對象包含了很多很多的屬性，通過.就可以訪問這里面的屬性；如果直接修改JS中的屬性，就會影響到HTML頁面中的展示效果；

判斷一下如果當前的img是男孩子的圖片，就把他轉換成女孩子，反之則把它轉換成男孩子；在JS中，如果想要比較兩個字符串是否相等，就用==號；

<img src="郭宇澤.png" title="這是個傻逼" alt="這是個傻逼"><script>let img=document.querySelector("img");//打印這個元素具體的屬性console.dir(img);console.log(img.src);console.log(img.title);console.log(img.alt);</script> <body><img src="郭宇澤.png" title="這是個傻逼" alt="這是個傻逼"><script>let img=document.querySelector("img");img.onclick=function(){if(img.alt=="這是個傻逼"){img.src="張智超.png";img.title="這是個聰明人";img.alt="這是個聰明人";}else{img.src="郭宇澤.png";img.alt="這是個傻逼";img.title="這是個傻逼";}}</script>

獲取修改表單元素屬性：

1)value:input的值； 2)disabled:禁止使用； 3)checked:復選框會使用； 4)selected:下拉框會進行使用； 5)type:input的文本類型,文本，密碼，按鈕，文件

實例1：對一個按鈕實現暫停和播放操作；

<input type="button" value="播放"><script>let button=document.querySelector("input");button.onclick=function(){if(button.value=="播放"){button.value="暫停";}else{button.value="播放";}}</script>

實例2：全選復選框按鈕；

1)這兩次點擊按鈕都是針對全選框按鈕來說的，當我們點擊全選按鈕之后，我們要進行循環掃描我們別的按鈕，并將他們的按鈕狀態都設置成all按鈕的狀態,這是實現了點擊all按鈕實現了全部選擇框選中

2)我們首先使用一層循環，來循環遍歷除了all選框的所有按鈕，創建回調函數，當我們進行點擊每一個小按鈕的時候，都要進行判斷，再次循環遍歷每一個按鈕，如果說有一個按鈕為未被選中，那么all這個按鈕就是不可以被選中的

<body><div class="father"><h3>你想要哪個人來給你當老婆</h3><input type="checkbox" class="person" id="1"><label for="1">妲己</label><br><input type="checkbox" class="person" id="2"><label for="2">安琪拉</label><br><input type="checkbox" class="person" id="3"><label for="3">小喬</label><br><input type="checkbox" class="person" id="4"><label for="4">阿軻</label><br><input type="checkbox" class="person" id="5"><label for="5">西施</label><br><input type="checkbox" class="all" id="6"><label for="6">我全都要</label></div><script>//1 先把要用到的元素全部取出來let persons=document.querySelectorAll(".person");let all=document.querySelector(".all");//2當我全都要這個選項被點擊后，就要把所有的選框都要自動勾選all.onclick=function(){for(let i=0;i<persons.length;i++){persons[i].checked=all.checked;}//3根據person的各種元素的狀態來選中all的值,當所有的persons的值都被選中之后，就會把all.checked的值設成true//只要有一個person沒有被選中，那么就把all.checked設成false//沒當我們點擊一個事件時，就要檢查所有的元素的點擊情況}for(let j=0;j<persons.length;j++){persons[j].onclick=function(){all.checked=checkperson();}}function checkperson(){ //遍歷所有的person超看他們的checked狀態 //如果所有的checked都是true,那么最終返回true，也就是把all.checked設成true //只要有一個person checked是false,namejoufanhuifalse for(i=0;i<persons.length;i++) {if(!persons[i].checked){return false;} } return true;}</script> </body>

3）獲取修改樣式屬性

相關的屬性有兩個：1))style屬性，影響了行內樣式，他是直接嵌入到html元素中的樣式；

2))className屬性，給元素設置一個CSS類名；

注意：CSS中的屬性，是帶有-的，但是我們在JS中獲取元素時可以用駝峰命名法；例如background-color可以轉換成backgroundColor

示例一：我們設定：每次點擊文字的時候，就讓他的字體進行放大

<body><div style="font-size:20px">李佳偉真帥</div><script>let div=document.querySelector("div");div.onclick=function(){ //先獲取他的字體大小console.log(div.style.fontSize);//這樣得到的div.style.fontSize是一個字符串，首先要把他轉化成整數//parseInt有一個特點，當她遇到px的時候，就不會進行轉化let number=parseInt(div.style.fontSize);number+=10;div.style.fontSize=number+"px";}</script> </body>

示例二:?夜間模式的切換

黑天顯示背景顏色A，字體顏色為B；

白天顯示背景顏色為B，字體顏色為A；

*{margin:0;padding:0;box-sizing:border-box;}.light{background-color:black;color:red;}.dack{background-color:green;color:blue;}.father{height:300px;width:300px;margin:0 auto;text-align:center;line-height:300px;}.one{display:flex;/* padding也需要放在父親元素里面 */padding:10px;}button{margin:0 auto;height:50px;width:100px;border-radius:20px;}button:active{background-color:blue;}</style> </head> <body><div class="father light">你敢點我嗎</div><div class="one"><button>點我切換模式</button></div><script>let div=document.querySelector("div");let button=document.querySelector("button");button.onclick=function(){if(div.className.indexOf("light")!==-1){div.className="father dack";div.innerHTML="你在點一個試試";}else{div.className="father light";div.innerHTML="你敢點我嗎";}}</script>

4）節點操作：

一.新增節點：

1 創建出一個節點，調用document.createElement(標簽名加上雙引號),接下來還可以對這個標簽對象設置多個屬性；

2 把這個節點給掛到DOM樹上

1))parent.append(child),創建出child元素，選中頁面中已有的parent，把child加到parent里面，如果parent已經有了一組child，就把新的child放到最后面；

2))parent.insertBefore(newchild,oldchild)，這是就把新的newchild插入到parent的子元素中，oldchild的前面；

二：刪除節點：

oldchild=element.removeChild(child);

注意：這里面被刪除的節點只是從dom樹里面被剔除了，但是此時仍然在內存中，可以隨時加到dom樹中的其他位置

那么什么時候他被徹底的刪除了呢？

當沒有這個引用指向這個對象的時候，JS中也是有垃圾回收機制的；例如說當一個引用在函數里面，這個函數的調用已經結束了，那么這個引用肯定也已經涼涼了；

<div class="father"><div class="one">我叫李家偉</div><div class="two">我拿到了字節的offer</div></div><script>let div=document.createElement("div");div.id="MYDIV";div.className="box";div.innerHTML="helloworld";console.log(div);//第一種插入方式//先獲取到父類的元素//再調用appendchild()方法把最新的元素放在最后面；let father=document.querySelector(".father");father.appendChild(div);//第二種插入方式//先獲取到父類的元素；和要插入在那個元素后面的元素father=document.querySelector(".father");let oldchild=document.querySelector(".one");father.insertBefore(div,oldchild);</script>

示例一：正常的頁面上顯示：李佳偉真帥，然后有一個按鈕，里面的內容是請說實話，點擊后，顯示為李佳偉確實很帥；

<div class="father"><div class="one">李佳偉</div><div class="two">是真的帥</div><input type="button" value="請說實話"></div><script> let button=document.querySelector("input"); button.onclick=function(){let father=document.querySelector(".father");let one=document.querySelector(".one");let two=document.querySelector(".two")let dele=father.removeChild(two); //先刪除是真的帥let newchild=document.createElement("div"); //在創建出一個新的元素，并添加到DOM樹上newchild.innerHTML="確實很帥";father.insertBefore(newchild,button);}</script>

示例二：猜數字界面：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father1{display:flex;}.father2{display:flex;}.father3{display:flex;}</style> </head> <body> <input type="button" value="請點擊重新開始一局游戲" class="resetbutton"> <div class="father1"> <div>請輸入你想要猜的數字:</div><input type="text" class="number"> <input type="button" value="點擊按鈕請開猜" class="start"> </div> <div class="father2"> <div>已經猜的次數:</div> <div class="count">0</div> </div> <div class="father3"><div>結果是:</div><div class="result"></div> </div> <script> //1先把用的元素獲取到 let resetbutton=document.querySelector(".resetbutton"); let inputnumber=document.querySelector(".number"); let result=document.querySelector(".result"); let inputcount=document.querySelector(".count"); let startbutton=document.querySelector(".start"); //2 生成一個隨機的整數，范圍是1-100; let guessnumber=Math.floor(Math.random()*100)+1; console.log(guessnumber); //3給startbutton注冊一個點擊事件 startbutton.onclick=function(){ //4 點擊之后，先更新猜的次數的顯示 let count=inputcount.innerHTML; count++; inputcount.innerHTML=count; //5再進行比較，將用和輸入框中的內容和生成的隨機數進行比較，最后返回結果是猜大了還是猜小了 let number=parseInt(inputnumber.value); //注意input標簽中的內容是用元素.value來獲取到的if(number>guessnumber){result.innerHTML="你猜大了";result.style.color="red";}else if(number==guessnumber){result.innerHTML="你猜對了";result.style.color="blue"}else{result.innerHTML="你猜小了";result.style.color="green";} } resetbutton.onclick=function() { //1重新生成隨機數 //2把猜的次數設回0 //3把輸入框的內容清空 //4把菜的結果的情況刪除 guessnumber=Math.floor(Math.random()*100)+1; result.innerHTML=""; inputnumber.value=""; inputcount.innerHTML=0; //或者這么寫，location和document一樣，都是JS提供的全局變量 //document是控制DOM樹上的操作的，location是控制頁面跳轉的 location.reload(); }</script> </body></html>

示例三：表白墻：

顯示結果：

1)每一行中的標簽都用div標簽來包裹，況且類名都是line，而每一行的div標簽用整體包含在一個大的div標簽中；把每一行中的元素全部變成行內塊元素，來實現水平布局和調控大小

2)想要控制文字之間對齊，輸入框之間對齊，就要讓每一個span標簽，每一個input標簽，的高度和寬度是相同的，況且span標簽的寬度和input標簽的寬度之和要等與父親元素的寬度

3)我們要向控制輸入框和文字之間的距離，可以調整文字與輸入框的寬度來進行調整

4)我們發現margin:0 auto如果不能調整button按鈕水平居中的話，直接套上一層div標簽，先辦法把它變成行內塊元素，在來實現水平布局；

*{padding:0;margin:0 auto;box-sizing:border-box}h3{text-align:center;font-size:70px;padding-top:10px;}p{text-align: center;font-size:30px;padding:10px;}.father{height:500px;width:600px;background-color:green;margin:0 auto;}.line{/* background-color:red; */height:100px;width:450px;/* 水平方向專用 */display:flex;justify-content:center;align-items:center;}span{font-size:20px;width:100px;height:30px;}input{height:30px;width:350px;}.but{display:flex;justify-content:center;}button{height:40px;width:200px;border:5px ridge blue;background-color:orange;}button:active{background-color:black;color:red;}input{font-size:20px;} </style> <body> <div class="father"><h3>表白墻</h3><p>輸入后點擊提交,會將信息顯示在表格中</p><div class="line"><span>誰</span><input type="text"></div><div class="line"><span>對誰說</span><input type="text"></div><div class="line"><span>說什么</span><input type="text"></div><div class="but"><button>提交</button></div></div><script>let submitbutton=document.querySelector(".but");submitbutton.onclick=function(){//1先進進行選中對應的輸入框let arr1=document.querySelectorAll("input");let from=arr1[0].value;let to=arr1[1].value;let message=arr1[2].value;if(from==null||to==null||message==null){alert("當前輸入框中缺少元素,請補全你的輸入框");return;}let father=document.querySelector(".father");let newnode=document.createElement("div");newnode.innerHTML=from+"對"+to+"說"+message;// newnode.className="line";father.appendChild(newnode);for(let i=0;i<arr1.length;i++){arr1[i].value="";}}</script>

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div class="father"><h1>表白墻</h1><p>輸入點擊后提交，結果將顯示在墻上</p><div class="line"><span>誰</span><input type="text"> </div><div class="line"> <span>對誰說</span><input type="text"></div><div class="line"><span>說什么</span><input type="text"></div><div class="but"><button>提交</button></div> </body><style>.father{background-color:green;width:60%;margin:0 auto;box-sizing:border-box;}h1{/* 這里把h2標簽當成一個字體，讓字體水平居中，就要用到text-align */text-align: center;/* 這是設置內邊距，也就是說設置字體和背景顏色頂部的距離 */padding:5px 0;}p{/* 控制P標簽里面的字水平居中 */text-align:center;padding:5px 0;}.line{/* 設置每一行的元素，水平居中，垂直居中 */height:50px;display:flex;justify-content:center;align-items:center; }span{font-size:25px;width:120px;}input{height:25px;}.but{display:flex;}button{margin:0 auto;width:200px;}</style><script>let button=document.querySelector(".but");button.onclick=function(){ //1 先獲取到框內元素，每一個輸入框里面的內容是一個edits的元素；let arr1=document.querySelectorAll("input");console.log(arr1); //2 把誰說的話具體分出來，然后再具體進行字符串的拼接 let from=arr1[0].value; let to=arr1[1].value; let message=arr1[2].value; console.log(from+"對"+to+"說"+message); //3 判斷輸入框內容是否合法 if(from==""||to==""||message==""){return; } //4創建出一個新的節點 let newnode=document.createElement("div"); newnode.className="line"; newnode.innerHTML=from+"對"+to+"說"+message; console.log(newnode); //5添加到DOM樹上 let father=document.querySelector(".father"); father.appendChild(newnode); //6 清空輸入框 for(let i=0;i<arr1.length;i++) {arr1[i].value="";console.log(1); }}</script> </body> </html>

注意：表白墻這樣的程序，所提交的數據，只是暫時保存在當前的網頁中，一旦數據刷新/關閉了，存的東西就啥也不在了；這樣的數據不具有持久性；核心辦法就是把這些數據提交到服務器上面，然后服務器把這些數據存到文件里或者是數據庫中；

示例四：任務編輯框：這題的大致的頁面形式是這樣的：在外邊的那層框是瀏覽器的邊框

先寫一部分代碼：這頁面有2個部分，最大的邊框是一個瀏覽器的背景，最上面是一塊背景區域，下面有是一塊背景區域，下面的背景區域再次分成兩部分；一部分存放未完成的工作，一部分存放完成的工作；

1)我們想要實現最下面的兩個背景區域實現彈性布局，保證兩個背景區域實現緊挨著的效果(因為div標簽是獨占一行的，所以我們要設置成彈性布局)

2)如何讓按鈕和輸入框是緊挨在一起的？

將按鈕和輸入框設置成高度是一樣的，然后因為是水平排列的，所以要實現彈性布局，然后再次調用justfy-content:flex-start，這樣就可以實現兩個標簽緊挨著在最左邊了

3)刪除按鈕是如何跑到中間去的？也就是說是如何跑到左側導航覽的最左邊

我們看似刪除按鈕是在中間，實質上我們把按鈕寫在左邊的導航連里面就可以了

我們在這里使用的是借物發力，我們每一行都要用一個div標簽(我們可以用line屬性來進行標識)，每一個div標簽里面都有選增框<span>標簽來進行保存內容，還有一個刪除按鈕，要想實現刪除按鈕在最左邊，就需要調整span標簽的寬度，把按鈕擠在最左邊

4)已完成和未完成的背景區域是如何展示出來的？

直接在h3標簽里面去設置背景高度，背景寬度和left(父親元素的高度是相同的)

5)讓文字與復選框之間有一定的距離，我們可以調整內邊距上下為0,左右有一定距離；

我們要實現的功能有下面兩種：

1)當我們在最上面的輸入框里面加入新建任務之后，會現在左邊彈出一個左邊的行(在左邊的未完成事件)

2)當我們進行選中輸入框的時候，事件會跑到右邊，當我們進行取消輸入框的時候，事件會回到輸入框的左邊；

3)此時我們想要實現刪除操作的時候，節點可能在左邊，節點也是可能在右邊的，此時我們要向進行刪除操作，必須要找到父親元素，此時我們是應該選中left,還是應該選中right呢？

沒有必要，我們可以直接調用一個方法:可以直接通過parentnode(獲取到某個元素的父親元素)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;box-sizing:border-box;}.father1{/* background-color:green; */height: 50px;width:100%;display:flex;justify-content:flex-start;}.father2{display:flex;}.left{/* background-color:red; */height:600px;width:50%;}.right{/* background-color:purple; */height:600px;width:50%;}.text{height:30px;}.addbutton{height:35px;background-color:orange;border:3px ridge purple;}.addbutton:active{background-color:black;color:red;}h2{text-align:center;line-height:100px;height:100px;width:100%;background-color:grey;color:rgb(255,255,255);}span{display:inline-block;width:300px;}.box{margin:0 5px;}</style> </head> <body><div class="father1"><input type="text" class="text"><input type="button" class="addbutton" value="點擊我新創建創建一個任務"></div><div class="father2"><div class="left"><h2>未完成</h2></div><div class="right"><h2>已完成</h2></div></div><script>let addbutton=document.querySelector(".addbutton");let father1=document.querySelector(".father1");let father2=document.querySelector(".father2");let left=document.querySelector(".left");let right=document.querySelector(".right");//1實現新增任務,在最上面的輸入框里面輸入任務，那么此時后會在未完成的區域里面新增任務addbutton.onclick=function(){let input=document.querySelector(".text");let inputvalue=input.value;if(inputvalue==""){alert("當前內容為空");return;}let newdiv=document.createElement("div");newdiv.className="row";let checkbox=document.createElement("input");checkbox.type="checkbox";checkbox.className="box";newdiv.appendChild(checkbox);let span=document.createElement("span");span.innerHTML=inputvalue;newdiv.appendChild(span);let deletebutton=document.createElement("input");deletebutton.type="button";deletebutton.className="delete";deletebutton.value="刪除";newdiv.appendChild(deletebutton);left.appendChild(newdiv);input.value="";//不能重復向dom樹上面添加元素，如果說原來已經存在，那么第二次則會更新//如果說若干次都對同一個節點進行相同的新增操作，那么只有第一次是有效的checkbox.onclick=function(){if(checkbox.checked){right.appendChild(newdiv);}else{left.appendChild(newdiv);}}deletebutton.onclick=function(){ let parentnode=newdiv.parentNode;parentnode.removeChild(newdiv);}}</script> </body> </html>

這個頁面一共有三個部分 <body><div class="header1"><input type="text"><input type="button" value="點擊我新建一個任務"></div> 左右兩個部分各占下面總區域的一半一半<div class="container"><div class="left"> </div><div class="right"> </div></div><style>.header1{background-color:red;height:200px;}.container{background-color:blue;height:400px;display:flex;}.left{background-color:brown;width:50%;height:400px;}.right{background-color:black;width:50%;height:400px;}</style> </body>

完整代碼是：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div class="header1"><input type="text" class="child1"><input type="button" value="點擊我新建一個任務" class="child2"></div><div class="container"><div class="left"><h3>未完成</h3><div class="father1"><input type="checkbox" class="box"><span>吃飯</span><input type="button" value="刪除" class="button"></div></div><div class="right"><h3>已完成</h3></div></div><style>.father1{/* 給第一個部分設置背景色，改變它的布局方式，讓他水平居中和垂直方向上居中 */height:50px;display:flex;align-items:center;}*{margin:0;padding:0;box-sizing:border-box;}.header1{/* background-color:red; */height:150px;display:flex;align-items:center;}.container{/* background-color:blue; */height:400px;display:flex;}.left{/* background-color:brown; */width:50%;height:400px;}.right{/* background-color:yellow; */width:50%;height:400px;}h3{/*設置已完成未完成和已完成兩個字的展示效果的的那個界面，這兩個字用一個大的背景顏色來搞*/background-color:grey;height:100px;font-size:50px;color:azure;text-align:center;line-height:100px; /* 這是主要設置字體大小的顏色，以及控制文字在我們指定的背景顏色中水平垂直居中 */}.father1 .box{margin:0 10px;}span{width:300px;/* 這里通過給字體吃飯設置一個背景寬度，把按鈕擠到邊界去了 */}.father1 .button{height:30px;width:40px;background-color:blue;}/* 任務中的輸入框 */.header1 .child1{height:50px;width:300px;font-size:25px;}.header1 .child2{height:50px;width:200px;background-color:orange;/* button元素會默認實現一個小的黑色邊框如果想要去除就寫上border:none */}</style><script> //新建任務 //1.1實現新建任務功能，首先獲取到新增按鈕 let startbutton=document.querySelector(".child2"); //1.2給新增按鈕設置一個點擊事件 startbutton.onclick=function(){ //1.3獲取到輸入框中的內容,首先獲取到輸入框，在獲取到內容 let inputbox=document.querySelector(".child1"); let text=inputbox.value; if(text=="") {alert("當前輸入框里面的內容為空，不可以新創建元素");return; } //1.4根據輸入框中的內容，創建元素,里面要包含一個button,span標簽 let father1 =document.createElement("div"); father1.className="father1"; let box=document.createElement("input"); box.type="checkbox"; box.className="box" let spantext=document.createElement("span"); spantext.innerHTML=text; let deletebutton=document.createElement("input"); deletebutton.type="button"; deletebutton.value="刪除"; deletebutton.className="button"; //1.5把這些元素掛到DOM樹上 father1.appendChild(box); father1.appendChild(spantext); father1.appendChild(deletebutton); let left=document.querySelector(".left"); let right=document.querySelector(".right"); left.appendChild(father1); //1.6把輸入框順便清空了 inputbox.value=null;//2 實現已完成功能 box.onclick=function() {//操作.father1這個對象，看他是把這個任務放到已完成里面還是未完成里面，可以根據方框的選中狀態進行判斷if(!box.checked){ right.appendChild(father1); //選中狀態，放到right里面}else{right.appendChild(father1); //沒選中，放到左邊 } }//3 實現刪除功能，針對刪除按鈕增加一個點擊事件,但是首先要知道她的父元素是誰 //他的父元素left，也有可能是right deletebutton.onclick=function() { let parent=father1.parentNode;parent.removeChild(father1); } }</script> </body> </html>

顯示效果為：

總結

以上是生活随笔為你收集整理的JavaScript(WebAPI)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基层社会治理综合管理平台智慧街道Java
下一篇： R语言实现朴素贝叶斯分类