JavaScript 构建一个简单的待办事项应用

AROCS8-8

于 2024-08-25 09:48:38 发布

阅读量203

点赞数 5

分类专栏：前端网页文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_66004363/article/details/141523593

版权

前端网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

包含添加、删除、标记任务功能。

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #todo-list {
            list-style-type: none;
            padding: 0;
        }
        #todo-list li {
            padding: 10px;
            background-color: #f4f4f4;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        .completed {
            text-decoration: line-through;
            color: gray;
        }
    </style>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="new-task" placeholder="Add a new task">
    <button onclick="addTask()">Add</button>
    <ul id="todo-list"></ul>

    <script>
        function addTask() {
            const taskInput = document.getElementById('new-task');
            const taskText = taskInput.value.trim();

            if (taskText === '') return;

            const li = document.createElement('li');
            li.textContent = taskText;

            li.addEventListener('click', function() {
                this.classList.toggle('completed');
            });

            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'Delete';
            deleteBtn.addEventListener('click', function() {
                li.remove();
            });

            li.appendChild(deleteBtn);
            document.getElementById('todo-list').appendChild(li);

            taskInput.value = '';
        }
    </script>
</body>
</html>

运行上述代码可得