本文侧重于开发具有一些基本功能的待办事项列表,例如:
- 添加任务
- 删除任务
- 交叉完成的任务
先决条件:
使用 HTML、CSS、JS、jQuery 和 Bootstrap-3 进行前端开发的基本知识。脚步:
- 初始化布局:
– 添加带有按钮的输入文本框以将任务添加到主列表。
– 我们将使用一些 CSS 位置固定属性将包含上述内容的容器设置为固定在按钮上。
– 现在我们将添加要添加任务的容器。以下是代码以及对上述内容的解释:
My Tasks:
- 添加任务的 jQuery 脚本:
现在我们将添加 jQuery 代码,以便我们可以在待办事项列表中添加任务。这里我们使用了 Bootstrap警报类来添加任务容器。- 单击任务右侧的十字按钮将永久删除该任务。
(警报具有该属性,否则我们还必须实现删除脚本)。
以下是代码以及对上述内容的解释:
My Tasks:
- 单击任务右侧的十字按钮将永久删除该任务。
- 指示已完成任务的脚本:
最后,我们将添加脚本以实现这样的功能:每当我们单击任务时,它都会被交叉,如果已经完成,将恢复回来。
为了穿越任务,我们将使用 CSS 中的text-decoration-line : line-through 属性。
最终解决方案:
My Tasks:
输出:
添加任务前:
添加任务后: