酷代码 AI
菜单
服务商

请写一个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 定时清除数据,但这种方式不够稳定和可靠。 [2024-11-08 22:21:36 | AI写代码神器 | 890点数解答]

相关提问
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]