快捷導(dǎo)航

純JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表

更新時(shí)間：2024年01月05日 11:27:49 作者：刻刻帝的海角

這篇文章主要給大家介紹了關(guān)于純JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表的相關(guān)資料,清單通常用于記錄我們?cè)谀骋惶煨枰瓿傻乃惺马?xiàng),將最關(guān)鍵的任務(wù)放在最上方,將最不重要的事項(xiàng)放在最下方,需要的朋友可以參考下

前言

在現(xiàn)代的web開發(fā)中，待辦事項(xiàng)列表是一個(gè)常見且實(shí)用的功能。它允許用戶記錄、追蹤和完成他們的任務(wù)。在這篇文章中，我們將使用純JavaScript來創(chuàng)建一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表。我們會(huì)涉及到HTML結(jié)構(gòu)的創(chuàng)建、CSS樣式的添加以及JavaScript交互的實(shí)現(xiàn)。

步驟1：創(chuàng)建HTML結(jié)構(gòu)

首先，我們需要在HTML文件中定義待辦事項(xiàng)列表的結(jié)構(gòu)。我們可以使用一個(gè)輸入框讓用戶輸入任務(wù)，一個(gè)按鈕來添加任務(wù)，以及一個(gè)無序列表來顯示任務(wù)。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Todo List</title>  
    <link rel="stylesheet" href="styles.css" rel="external nofollow" >  
</head>  
<body>  
    <div class="container">  
        <h1>Todo List</h1>  
        <input type="text" id="todoInput" placeholder="Enter a new todo">  
        <button id="addButton">Add Todo</button>  
        <ul id="todoList">  
        </ul>  
    </div>  
    <script src="script.js"></script>  
</body>  
</html>

步驟2：添加CSS樣式

接下來，我們可以在一個(gè)單獨(dú)的CSS文件中添加一些樣式來美化我們的待辦事項(xiàng)列表。例如，我們可以為輸入框、按鈕和列表項(xiàng)添加樣式

/* styles.css */  
.container {  
    max-width: 600px;  
    margin: 0 auto;  
    padding: 20px;  
}  
  
input[type="text"] {  
    width: 100%;  
    padding: 10px;  
    margin-bottom: 10px;  
}  
  
button {  
    padding: 10px 20px;  
    background-color: #007BFF;  
    color: white;  
    border: none;  
    cursor: pointer;  
    margin-bottom: 10px;  
}  
  
ul {  
    list-style-type: none;  
    padding: 0;  
}  
  
li {  
    padding: 10px;  
    background-color: #F8F9FA;  
    margin-bottom: 5px;  
}

步驟3：使用JavaScript實(shí)現(xiàn)交互功能

最后，我們需要在JavaScript文件中編寫代碼來實(shí)現(xiàn)待辦事項(xiàng)的添加和顯示功能。我們可以通過為按鈕添加一個(gè)事件監(jiān)聽器來實(shí)現(xiàn)這一點(diǎn)，當(dāng)按鈕被點(diǎn)擊時(shí)，獲取輸入框的值，創(chuàng)建一個(gè)新的列表項(xiàng)，并將其添加到列表中。

// script.js  
document.addEventListener('DOMContentLoaded', function() {  
    const todoInput = document.getElementById('todoInput');  
    const addButton = document.getElementById('addButton');  
    const todoList = document.getElementById('todoList');  
      
    addButton.addEventListener('click', function() {  
        const todoText = todoInput.value.trim(); // 獲取輸入框的值并去除前后的空格  
        if (todoText) { // 如果輸入框的值不為空  
            const listItem = document.createElement('li'); // 創(chuàng)建一個(gè)新的列表項(xiàng)元素li  
            listItem.textContent = todoText; // 設(shè)置列表項(xiàng)的文本內(nèi)容為輸入框的值  
            todoList.appendChild(listItem); // 將新的列表項(xiàng)添加到無序列表ul中  
            todoInput.value = ''; // 清空輸入框的值以便用戶輸入下一個(gè)待辦事項(xiàng)  
        } else {  
            alert('Please enter a valid todo'); // 如果輸入框的值為空，則顯示一個(gè)警告消息提醒用戶輸入有效的待辦事項(xiàng)內(nèi)容。注意這里只是一個(gè)簡(jiǎn)單的錯(cuò)誤處理，實(shí)際開發(fā)中可能需要更友好的用戶體驗(yàn)設(shè)計(jì)。  
        }  
    });  
});

現(xiàn)在，當(dāng)你打開HTML文件時(shí)，你應(yīng)該能夠看到一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表應(yīng)用程序。你可以在輸入框中輸入任務(wù)，點(diǎn)擊按鈕將其添加到列表中。每個(gè)任務(wù)都會(huì)作為一個(gè)新的列表項(xiàng)顯示在列表中。當(dāng)然，這只是一個(gè)基本示例，你可以根據(jù)自己的需求擴(kuò)展它，例如添加刪除任務(wù)的功能、標(biāo)記任務(wù)為已完成的功能等。希望這篇文章能幫助你了解如何使用JavaScript創(chuàng)建一個(gè)待辦事項(xiàng)列表！

總結(jié)

到此這篇關(guān)于純JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表的文章就介紹到這了,更多相關(guān)JS創(chuàng)建待辦事項(xiàng)列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: