Initial commit: 待办事项 Web 应用

2026-09-27 18:33:55 +08:00
commit 9f4e16d4e3
2 changed files with 65 additions and 0 deletions
@@ -0,0 +1,21 @@
+# Todo App
+
+简洁的待办事项 Web 应用，支持添加、完成和删除任务。
+
+## 功能
+
+- ✅ 添加新任务
+- ✅ 标记完成/未完成
+- ✅ 删除任务
+- ✅ 本地存储（刷新不丢失）
+
+## 使用方式
+
+直接用浏览器打开 `index.html` 即可使用。
+
+## 技术栈
+
+- HTML5
+- CSS3
+- Vanilla JavaScript
+- LocalStorage
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>待办事项</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:system-ui,sans-serif;background:#f5f5f5;display:flex;justify-content:center;padding:40px 20px}
+.container{max-width:500px;width:100%}
+h1{text-align:center;color:#333;margin-bottom:24px}
+.input-row{display:flex;gap:8px;margin-bottom:20px}
+.input-row input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:8px;font-size:15px}
+.input-row button{padding:10px 20px;background:#41873f;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px}
+.todo-list{list-style:none}
+.todo-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-radius:8px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
+.todo-item.completed span{text-decoration:line-through;color:#999}
+.todo-item input[type=checkbox]{width:18px;height:18px;cursor:pointer}
+.todo-item span{flex:1;font-size:15px}
+.todo-item button{background:none;border:none;color:#c44;cursor:pointer;font-size:18px}
+.empty{text-align:center;color:#999;padding:40px 0}
+</style>
+</head>
+<body>
+<div class="container">
+<h1>📝 待办事项</h1>
+<div class="input-row">
+<input type="text" id="todoInput" placeholder="添加新任务..." onkeydown="if(event.key==='Enter')addTodo()">
+<button onclick="addTodo()">添加</button>
+</div>
+<ul class="todo-list" id="todoList"></ul>
+<div class="empty" id="emptyMsg">暂无待办事项，添加一个吧 ✨</div>
+</div>
+<script>
+let todos=JSON.parse(localStorage.getItem('todos')||'[]');
+function render(){const l=document.getElementById('todoList');const e=document.getElementById('emptyMsg');l.innerHTML=todos.map((t,i)=>`<li class="todo-item ${t.done?'completed':''}"><input type="checkbox" ${t.done?'checked':''} onchange="toggle(${i})"><span>${t.text}</span><button onclick="remove(${i})">×</button></li>`).join('');e.style.display=todos.length?'none':'block'}
+function addTodo(){const i=document.getElementById('todoInput');const t=i.value.trim();if(!t)return;todos.push({text:t,done:false});i.value='';save()}
+function toggle(i){todos[i].done=!todos[i].done;save()}
+function remove(i){todos.splice(i,1);save()}
+function save(){localStorage.setItem('todos',JSON.stringify(todos));render()}
+render();
+</script>
+</body>
+</html>