狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

昨天已經搭建好了項目的基本框架，今天來開干吧。

基本功能里，我們實現三個主要的功能：

• 添加任務

• 刪除任務

• 標記任務完成

所有的這些操作，都使用 JavaScript 操作動態完成。

最終效果如下：

?

添加任務

先來看添加任務部分。

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

上面是頁面的代碼，添加任務的邏輯是：

• 在input里輸入任務名稱，然后點擊button添加。

• 點擊添加后面觸發onclick事件，將新建的任務添加到列表ul里。

所以這里的要點，是：

• 為按鈕添加點擊事件

• 獲取 input 內容

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

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

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

// 添加任務函數 function addTask() {   //添加代碼，一會兒補上。 } // 綁定事件監聽器 addTaskBtn.addEventListener('click', addTask); 

先定義一個處理任務添加的函數addTask()，再為按鈕添加點擊事件的監聽，用的是addEventListener()方法。

最后就剩余添加任務的函數了。

我們先來看一下，在 ul 標簽下，添加一條一條的任務，是通過什么實現的呢？

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

其實就是上述的結構，每一個任務，我們使用了一個li元素，里面有兩個按鈕，一個完成一個刪除。

這樣我們就可以在 JavaScript 中構建 DOM 元素了。

// 添加任務函數 function addTask() {   const taskText = taskInput.value;    // 1. 創建新的任務項   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. 將新任務項添加到任務列表中   taskList.appendChild(newTask); } 

通過上述代碼，我們創建了li元素和兩個button元素，并把它們按上述層級關系組裝好，最后追加到任務列表中。

刪除任務

有了前面的代碼，想要刪除任務，就是在刪除按鈕上同樣添加一個點擊事件監聽。

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

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

任務標記完成

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

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

這個 completed 類，是在前面定義的，如下：

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

完善

這樣我們就完成基本的代碼，但是如果你試了，會發現有一點點和我們展示的不一樣，因為這里少了個細節處理。

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

如果加上判斷任務不能為空，以及在最后把任務的 input 清空，整個過程看起來就更好了。

完整的 JavaScript 代碼如下：

// 獲取DOM元素 const taskList = document.getElementById('task-list'); const taskInput = document.getElementById('task-input'); const addTaskBtn = document.getElementById('add-task-btn');  // 添加任務函數 function addTask() {   const taskText = taskInput.value;   if (taskText === '') {     alert('任務不能為空');     return;   }    // 1. 創建新的任務項   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);    // 將新任務項添加到任務列表中   taskList.appendChild(newTask);    // 清空輸入框   taskInput.value = ''; }  // 綁定事件監聽器 addTaskBtn.addEventListener('click', addTask); 

總結

恭喜你完成了今天部分的學習，希望你也動手親自寫了寫代碼。

咱們明天繼續。