基于html/javascript开发todolist

页面代码
<!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>  
    /* 简单的样式 */  
    .todo-item {  
        margin-bottom: 1em;  
    }  
    .todo-item input[type="date"] {  
        margin-right: 0.5em;  
    }  
    .todo-item .status {  
        font-weight: bold;  
        margin-left: 0.5em;  
    }  
    .add-task-button {  
        margin-top: 1em;  
    }  
</style>  
</head>  
<body>  
  
<div id="todo-list">  
    <!-- 示例任务 -->  
    <div class="todo-item">  
        <input type="text" class="task-description" placeholder="任务描述">  
        <input type="date" class="start-date" placeholder="开始日期">  
        <input type="date" class="end-date" placeholder="结束日期" onchange="updateStatus(this)">  
        <input type="date" class="target-date" placeholder="目标日期">  
        <span class="status">待完成</span>  
        <button class="delete-task-button" onclick="deleteTask(this)">删除</button>  
    </div>  
    <!-- 添加更多任务时，将在这里添加新的todo-item元素 -->  
</div>  
  
<button class="add-task-button" onclick="addTask()">新增任务</button>  
  
<script>  
// 更新任务状态  
function updateStatus(endDateInput) {  
    var todoItem = endDateInput.closest('.todo-item');  
    var statusSpan = todoItem.querySelector('.status');  
    if (endDateInput.value) {  
        statusSpan.textContent = '已完成';  
    } else {  
        statusSpan.textContent = '待完成';  
    }  
}  
  
// 添加新任务  
function addTask() {  
    var list = document.getElementById('todo-list');  
    var newTaskHtml = '<div class="todo-item">' +  
        '<input type="text" class="task-description" placeholder="任务描述">' +  
        '<input type="date" class="start-date" placeholder="开始日期">' +  
        '<input type="date" class="end-date" placeholder="结束日期" onchange="updateStatus(this)">' +  
        '<input type="date" class="target-date" placeholder="目标日期">' +  
        '<span class="status">待完成</span>' +  
        '<button class="delete-task-button" onclick="deleteTask(this)">删除</button>' +  
        '</div>';  
    list.insertAdjacentHTML('beforeend', newTaskHtml);  
}  
  
// 删除任务  
function deleteTask(button) {  
    var todoItem = button.closest('.todo-item');  
    todoItem.remove();  
}  
</script>  
  
</body>  
</html>
Was this helpful?
0 / 0