餐饮vi设计网站,找个网站2021能看到,wordpress 非法阻断,东莞智通人才网招聘信息在现代网页开发中#xff0c;JavaScript被广泛应用于实现动态交互效果。看完这一篇你就可以设计一个动态任务列表#xff0c;全面展示HTML、CSS和JavaScript在前端开发中的实际应用。通过本案例#xff0c;你将深入了解事件监听、DOM操作以及用户交互设计的实现过程。 案例需… 在现代网页开发中JavaScript被广泛应用于实现动态交互效果。看完这一篇你就可以设计一个动态任务列表全面展示HTML、CSS和JavaScript在前端开发中的实际应用。通过本案例你将深入了解事件监听、DOM操作以及用户交互设计的实现过程。 案例需求
在设计动态任务列表时我们需要满足以下功能需求
动态添加任务并显示在列表中。勾选任务表示完成状态并通过样式标记。单独删除任务。一键清空所有任务。持久化任务数据支持刷新页面后数据保留。 HTML结构
首先创建一个基础的HTML页面包含任务输入框、添加按钮和任务展示区域。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title任务列表/titlelink relstylesheet hrefstyles.css
/head
bodydiv classcontainerh1任务列表/h1div classtask-inputinput typetext idtask-input placeholder输入任务...button idadd-task添加任务/button/divul idtask-list/ulbutton idclear-tasks清空所有任务/button/divscript srcscript.js/script
/body
/htmlCSS样式
为任务列表添加简单的样式以提升用户体验和美观性。
body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;
}.container {background: #ffffff;padding: 20px;border-radius: 5px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 300px;
}h1 {text-align: center;color: #333;
}.task-input {display: flex;gap: 10px;margin-bottom: 20px;
}input[typetext] {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 4px;
}button {background-color: #007bff;color: #fff;border: none;border-radius: 4px;padding: 10px 15px;cursor: pointer;transition: background-color 0.3s;
}button:hover {background-color: #0056b3;
}#task-list {list-style-type: none;padding: 0;
}#task-list li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #ddd;
}#task-list li.completed {text-decoration: line-through;color: #aaa;
}JavaScript功能实现
编写JavaScript代码完成核心功能包括任务添加、标记完成、删除和清空。
document.addEventListener(DOMContentLoaded, () {const taskInput document.getElementById(task-input);const addTaskButton document.getElementById(add-task);const taskList document.getElementById(task-list);const clearTasksButton document.getElementById(clear-tasks);// 从本地存储加载任务const loadTasks () {const tasks JSON.parse(localStorage.getItem(tasks)) || [];tasks.forEach(task {addTaskToList(task.text, task.completed);});};// 保存任务到本地存储const saveTasks () {const tasks Array.from(taskList.children).map(taskItem ({text: taskItem.firstChild.textContent,completed: taskItem.classList.contains(completed)}));localStorage.setItem(tasks, JSON.stringify(tasks));};// 添加任务到列表const addTaskToList (taskText, completed false) {const taskItem document.createElement(li);taskItem.innerHTML ${taskText} button classdelete-task删除/button;if (completed) {taskItem.classList.add(completed);}taskList.appendChild(taskItem);// 绑定事件taskItem.addEventListener(click, (e) {if (e.target.classList.contains(delete-task)) {taskItem.remove();saveTasks();} else {taskItem.classList.toggle(completed);saveTasks();}});};// 添加任务addTaskButton.addEventListener(click, () {const taskText taskInput.value.trim();if (taskText ) {alert(任务内容不能为空);return;}addTaskToList(taskText);taskInput.value ;saveTasks();});// 清空所有任务clearTasksButton.addEventListener(click, () {taskList.innerHTML ;saveTasks();});// 初始化加载任务loadTasks();
});功能亮点
1. 动态交互
用户可以实时添加任务任务状态和列表内容即时更新提升了用户体验。
2. 数据持久化
通过localStorage任务数据可在页面刷新后保留为用户提供连续的使用体验。
3. 任务操作
用户可单独标记完成、删除任务或一键清空所有任务实现灵活的任务管理。 运行效果
打开页面后可以在输入框中输入任务名称。点击“添加任务”按钮任务将显示在列表中。点击任务可以切换完成状态已完成任务会以划线标记。点击“删除”按钮可移除单个任务。点击“清空所有任务”按钮可清空整个任务列表。刷新页面后任务数据依然可见。运行结果如图 优化与扩展
1. 搜索功能
可以为任务列表添加搜索框实时筛选任务。
2. 分类管理
支持对任务进行分类例如工作、学习、生活等。
3. 响应式设计
优化页面布局使其在移动设备上同样具有良好的用户体验。
4. 数据库集成
将任务数据存储在数据库中实现跨设备同步。 总结
通过本案例你学会了如何使用JavaScript实现动态任务列表功能包括事件监听、DOM操作和数据持久化。该案例为初学者提供了全面的实践机会同时也可以作为更复杂应用的基础。希望本案例能帮助你进一步提升JavaScript开发技能打造更强大、更实用的网页应用。
