超实用！手把手教你打造支持在线编辑、定时清任务的美观 ToDoList 网页

以下是一个使用 HTML、CSS 和 JavaScript 实现的简单待办事项列表（ToDoList）网页示例，具备您要求的基本功能，但定时清空已完成任务的功能需要在服务器端实现，这里只是提供了前端的界面和交互逻辑。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ToDo List</title> <style> body { font-family: Arial, sans-serif; background-color: #f8f9fa; } h1 { color: #333; } .container { max-width: 500px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } ul { list-style-type: none; padding: 0; } li { padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; } li span { margin-right: 10px; } li button { background-color: #f44336; } </style> </head> <body> <div class="container"> <h1>ToDo List</h1> <input type="text" id="todoInput" placeholder="输入待办事项"> <button onclick="addTodo()">添加</button> <ul id="todoList"> </ul> </div> <script> // 待办事项数组 let todos = []; // 添加待办事项 function addTodo() { const todoText = document.getElementById('todoInput').value; if (todoText) { todos.push({ text: todoText, completed: false }); renderTodos(); document.getElementById('todoInput').value = ''; } } // 渲染待办事项列表 function renderTodos() { const todoList = document.getElementById('todoList'); todoList.innerHTML = ''; for (let i = 0; i < todos.length; i++) { const todo = todos[i]; const li = document.createElement('li'); li.innerHTML = `<span>${todo.completed? '✔' : ''}</span>${todo.text} <button onclick="completeTodo(${i})">完成</button>`; todoList.appendChild(li); } } // 标记待办事项为已完成 function completeTodo(index) { todos[index].completed = true; renderTodos(); } </script> </body> </html> ``` 要实现每天定时清空已完成的任务，您可能需要使用后端语言（如 Python、Node.js 等）结合数据库来处理，或者使用浏览器的本地存储（LocalStorage）并通过 JavaScript 定时清除数据，但这种方式不够稳定和可靠。 ######[AI写代码神器 | 890点数解答 | 2024-11-08 22:21:36]

服务商

更多选项

快捷项

自定义