日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

昨天已經(jīng)搭建好了項(xiàng)目的基本框架，今天來(lái)開(kāi)干吧。

基本功能里，我們實(shí)現(xiàn)三個(gè)主要的功能：

• 添加任務(wù)

• 刪除任務(wù)

• 標(biāo)記任務(wù)完成

所有的這些操作，都使用 JavaScript 操作動(dòng)態(tài)完成。

最終效果如下：

?

添加任務(wù)

先來(lái)看添加任務(wù)部分。

<input type="text" id="task-input" placeholder="輸入新任務(wù)" /> <button id="add-task-btn">添加任務(wù)</button> <ul id="task-list"></ul> 

上面是頁(yè)面的代碼，添加任務(wù)的邏輯是：

• 在input里輸入任務(wù)名稱，然后點(diǎn)擊button添加。

• 點(diǎn)擊添加后面觸發(fā)onclick事件，將新建的任務(wù)添加到列表ul里。

所以這里的要點(diǎn)，是：

• 為按鈕添加點(diǎn)擊事件

• 獲取 input 內(nèi)容

• 組裝任務(wù) DOM 元素，添加到列表中。

// 獲取DOM元素 const taskList = document.getElementById('task-list'); const taskInput = document.getElementById('task-input'); const addTaskBtn = document.getElementById('add-task-btn'); 

先把我們需要的三個(gè)元素獲取到，這里都使用了document.getElementById()方法。

// 添加任務(wù)函數(shù) function addTask() {   //添加代碼，一會(huì)兒補(bǔ)上。 } // 綁定事件監(jiān)聽(tīng)器 addTaskBtn.addEventListener('click', addTask); 

先定義一個(gè)處理任務(wù)添加的函數(shù)addTask()，再為按鈕添加點(diǎn)擊事件的監(jiān)聽(tīng)，用的是addEventListener()方法。

最后就剩余添加任務(wù)的函數(shù)了。

我們先來(lái)看一下，在 ul 標(biāo)簽下，添加一條一條的任務(wù)，是通過(guò)什么實(shí)現(xiàn)的呢？

<li class="task">   任務(wù)1   <button>完成</button>   <button>刪除</button> </li> 

其實(shí)就是上述的結(jié)構(gòu)，每一個(gè)任務(wù)，我們使用了一個(gè)li元素，里面有兩個(gè)按鈕，一個(gè)完成一個(gè)刪除。

這樣我們就可以在 JavaScript 中構(gòu)建 DOM 元素了。

// 添加任務(wù)函數(shù) function addTask() {   const taskText = taskInput.value;    // 1. 創(chuàng)建新的任務(wù)項(xiàng)   const newTask = document.createElement('li');   newTask.className = 'task';   newTask.textContent = taskText;    // 2. 添加完成按鈕   const completeBtn = document.createElement('button');   completeBtn.textContent = '完成';    // 3. 添加刪除按鈕   const deleteBtn = document.createElement('button');   deleteBtn.textContent = '刪除';    newTask.appendChild(completeBtn);   newTask.appendChild(deleteBtn);    // 4. 將新任務(wù)項(xiàng)添加到任務(wù)列表中   taskList.appendChild(newTask); } 

通過(guò)上述代碼，我們創(chuàng)建了li元素和兩個(gè)button元素，并把它們按上述層級(jí)關(guān)系組裝好，最后追加到任務(wù)列表中。

刪除任務(wù)

有了前面的代碼，想要?jiǎng)h除任務(wù)，就是在刪除按鈕上同樣添加一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)。

  // 3. 添加刪除按鈕   const deleteBtn = document.createElement('button');   deleteBtn.textContent = '刪除';   deleteBtn.addEventListener('click', () => {     taskList.removeChild(newTask);   }); 

把前面的添加刪除按鈕代碼里，添加事件監(jiān)聽(tīng)，然后通過(guò) removeChild()方法，就直接刪除了。

任務(wù)標(biāo)記完成

同樣的道理，在完成按鈕上，也是添加事件監(jiān)聽(tīng)，所不同的是這里使用了toggle()方法，為這個(gè)任務(wù)添加了一個(gè) completed 類。

  // 2. 添加完成按鈕   const completeBtn = document.createElement('button');   completeBtn.textContent = '完成';   completeBtn.addEventListener('click', () => {     newTask.classList.toggle('completed');   }); 

這個(gè) completed 類，是在前面定義的，如下：

.task.completed {   text-decoration: line-through; } 

完善

這樣我們就完成基本的代碼，但是如果你試了，會(huì)發(fā)現(xiàn)有一點(diǎn)點(diǎn)和我們展示的不一樣，因?yàn)檫@里少了個(gè)細(xì)節(jié)處理。

// 添加任務(wù)函數(shù) function addTask() {   const taskText = taskInput.value;   if (taskText === '') {     alert('任務(wù)不能為空');     return;   }    //其它代碼    // 清空輸入框   taskInput.value = ''; } 

如果加上判斷任務(wù)不能為空，以及在最后把任務(wù)的 input 清空，整個(gè)過(guò)程看起來(lái)就更好了。

完整的 JavaScript 代碼如下：

// 獲取DOM元素 const taskList = document.getElementById('task-list'); const taskInput = document.getElementById('task-input'); const addTaskBtn = document.getElementById('add-task-btn');  // 添加任務(wù)函數(shù) function addTask() {   const taskText = taskInput.value;   if (taskText === '') {     alert('任務(wù)不能為空');     return;   }    // 1. 創(chuàng)建新的任務(wù)項(xiàng)   const newTask = document.createElement('li');   newTask.className = 'task';   newTask.textContent = taskText;    // 2. 添加完成按鈕   const completeBtn = document.createElement('button');   completeBtn.textContent = '完成';   completeBtn.addEventListener('click', () => {     newTask.classList.toggle('completed');   });    // 3. 添加刪除按鈕   const deleteBtn = document.createElement('button');   deleteBtn.textContent = '刪除';   deleteBtn.addEventListener('click', () => {     taskList.removeChild(newTask);   });    newTask.appendChild(completeBtn);   newTask.appendChild(deleteBtn);    // 將新任務(wù)項(xiàng)添加到任務(wù)列表中   taskList.appendChild(newTask);    // 清空輸入框   taskInput.value = ''; }  // 綁定事件監(jiān)聽(tīng)器 addTaskBtn.addEventListener('click', addTask); 

總結(jié)

恭喜你完成了今天部分的學(xué)習(xí)，希望你也動(dòng)手親自寫(xiě)了寫(xiě)代碼。

咱們明天繼續(xù)。