45 lines
2.4 KiB
HTML
45 lines
2.4 KiB
HTML
<!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>
|