利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

我来为您详细讲解利用前端HTML+CSS+JS开发简单的TODOLIST功能的完整攻略。

1. 思路

要开发一个TODOLIST功能，需要考虑以下几点：

任务的添加、删除、修改
任务的状态切换（完成/未完成）

通过以上几点的考虑，我们可以确定需要以下几个功能模块：

添加任务模块
显示任务列表模块
修改/删除任务模块
切换任务状态模块

在这些模块中，我们需要使用到html、css、js三种前端技术，分别来实现页面的基础布局、样式设置、以及交互逻辑。

2. HTML布局

首先，我们需要定义一个容器，用来承载整个TODOLIST功能：

<div id="todo-wrapper">
    <!--其他模块在这里添加-->
</div>

在容器中，我们需要添加四个模块：添加任务模块、显示任务列表模块、修改/删除任务模块、切换任务状态模块。

<div id="todo-wrapper">
    <!--添加任务模块-->
    <div class="add-area">
        <input type="text" placeholder="请输入任务内容">
        <button>添加</button>
    </div>

    <!--显示任务列表模块-->
    <div class="list-area">
        <ul>
        </ul>
    </div>

    <!--修改/删除任务模块-->
    <div class="edit-area">
        <input type="text">
        <button class="edit-btn">修改</button>
        <button class="delete-btn">删除</button>
    </div>

    <!--切换任务状态模块-->
    <div class="status-area">
        <input type="checkbox" id="status-checkbox">
        <label for="status-checkbox">显示已完成任务</label>
    </div>
</div>

3. CSS样式

为了让TODOLIST功能有更好的用户体验，我们需要对其进行样式优化。

为了使页面更加美观，我们需要对整个TODOLIST容器进行一些基础样式设置：

#todo-wrapper {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

接下来，我们需要对容器里面的各个模块进行样式设置：

/*添加任务模块*/
.add-area {
    margin-bottom: 20px;
}
.add-area input[type=text] {
    width: 60%;
    padding: 10px 20px;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    color: #333;
}
.add-area button {
    padding: 10px 20px;
    border: none;
    background-color: #4caf50;
    color: #fff;
}
.add-area button:hover {
    background-color: #3e8e41;
}

/*显示任务列表模块*/
.list-area {
    margin-bottom: 20px;
}
.list-area ul {
    list-style: none;
}
.list-area li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.list-area li:last-child {
    margin-bottom: 0;
}
.list-area li .task-info {
    flex: 1;
    font-size: 16px;
    color: #333;
    text-decoration: none;
}
.list-area li .task-info.completed {
    text-decoration: line-through;
    color: #9e9e9e;
}
.list-area li .edit-btn, .list-area li .delete-btn {
    margin-left: 10px;
    padding: 6px 12px;
    border: none;
    background-color: #4caf50;
    color: #fff;
}
.list-area li .edit-btn:hover, .list-area li .delete-btn:hover {
    background-color: #3e8e41;
}

/*编辑删除任务模块*/
.edit-area {
    display: none;
}
.edit-area input[type=text] {
    width: 60%;
    padding: 10px 20px;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    color: #333;
}
.edit-area .edit-btn, .edit-area .delete-btn {
    padding: 6px 12px;
    border: none;
    background-color: #4caf50;
    color: #fff;
}
.edit-area .edit-btn:hover, .edit-area .delete-btn:hover {
    background-color: #3e8e41;
}

/*切换任务状态模块*/
.status-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.status-area label {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
}

4. JS交互逻辑

为了实现TODOLIST的所有功能，我们需要使用到一些JS交互逻辑：

4.1 添加任务

var addInput = document.querySelector('.add-area input');
var addBtn = document.querySelector('.add-area button');
var listUl = document.querySelector('.list-area ul');

addBtn.addEventListener('click', function() {
    if (addInput.value.trim() === '') {
        alert('请输入任务内容');
        return;
    }
    var li = document.createElement('li');
    li.innerHTML = '<a href="#" class="task-info">' + addInput.value + '</a><span class="buttons"><button class="edit-btn">修改</button><button class="delete-btn">删除</button></span>';
    listUl.appendChild(li);
    addInput.value = '';
});

当用户在添加任务模块中输入任务内容并点击“添加”按钮时，会调用这个函数。如果输入框为空，则提示用户输入任务内容。否则，通过li元素的innerHTML属性向任务列表中添加一个新的任务。

4.2 显示/隐藏编辑任务模块

var listUl = document.querySelector('.list-area ul');
var editArea = document.querySelector('.edit-area');
var editInput = document.querySelector('.edit-area input');
var editBtn = document.querySelector('.edit-area .edit-btn');
var deleteBtn = document.querySelector('.edit-area .delete-btn');

listUl.addEventListener('click', function(e) {
    if (e.target.tagName.toLowerCase() === 'a') {
        e.preventDefault();
        var taskInfo = e.target;
        var li = taskInfo.parentNode;
        var taskName = taskInfo.text;
        editInput.value = taskName;
        editArea.style.display = 'block';
    }
});
deleteBtn.addEventListener('click', function() {
    editArea.style.display = 'none';
});

当用户点击任务列表中的任务链接时会调用这个函数，因为默认行为会跳转到链接指定的页面，所以我们通过e.preventDefault()来阻止这个默认行为，并显示出编辑任务模块。

当用户点击编辑任务模块中的“删除”按钮时，则会调用这个函数，隐藏编辑任务模块。

4.3 修改任务

editBtn.addEventListener('click', function() {
    var li = editInput.parentNode.parentNode;
    var taskInfo = li.querySelector('.task-info');
    var taskName = editInput.value.trim();

    if (taskName === '') {
        alert('请输入任务内容');
        return;
    }

    taskInfo.innerHTML = taskName;
    editArea.style.display = 'none';
});

当用户在编辑任务模块中修改任务内容并点击“修改”按钮时，会调用这个函数。如果输入框为空，则提示用户输入任务内容。否则，将任务列表中对应的任务修改为新的任务内容，并隐藏编辑任务模块。

4.4 删除任务

listUl.addEventListener('click', function(e) {
    if (e.target.className === 'delete-btn') {
        var li = e.target.parentNode.parentNode;
        listUl.removeChild(li);
    }
});

当用户在任务列表中点击某个任务下的“删除”按钮时，会调用这个函数。从任务列表中删除该任务对应的li元素。

4.5 切换任务状态

var statusCheckbox = document.querySelector('#status-checkbox');
statusCheckbox.addEventListener('change', function () {
    var taskInfos = document.querySelectorAll('.task-info');
    for (var i = 0; i < taskInfos.length; i++) {
        var taskInfo = taskInfos[i];
        if (statusCheckbox.checked) {
            if (!taskInfo.classList.contains('completed')) {
                taskInfo.parentNode.style.display = 'none';
            }
        } else {
            taskInfo.parentNode.style.display = 'flex';
        }
    }
});

用户通过切换复选框来切换任务列表中任务的状态，已完成的任务会在显示完成的状态时呈现，未完成的任务则在不显示完成的状态时呈现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本） - Python技术站