JS实现记事本

前言

改变拖延症从现在开始，本文将带大家使用JS实现简易的记事本功能。先看效果:

话不多说直接开整!

HTML部分

定义一个大盒子（container）将输入事项（input-group）和代办事项列表（list）这两个盒子包含起来组成页面的整体结构。

其中每个标签的具体作用如下:

1. id为todo-list的无序列表来展示代办事项

2. ul里面会动态插入li来显示每个代办事项

3. 每个代办事项的li会包含以下结构:

   3.1 input元素,类型为checkbox,用于标记该事项是否已完成
   3.2 span元素,显示代办事项的内容
   3.3 button元素,点击可以删除该代办事项
   

CSS部分

重点:弹性布局(flex)

通过给父容器设置 display: flex,然后通过 flex、justify-content、align-items 等属性,可以方便地控制子元素的对齐、顺序、占用空间等,实现灵活的响应式布局。

该容器的css样式如下:

将每一个li标签的内容设置为一个div，该div设置为弹性布局,其宽度继承父容器li的80%，其子容器item-content按比例100%继承父容器flex的宽度，复选框使用margin属性设置间距与item-content隔开。

JS部分

通过JavaScript代码可以实现以下功能:

1. 获取用户在newTodo输入框中的输入,新增代办事项
2. 点击代办事项左边的checkbox可以标记完成状态
3. 点击删除按钮可以删除该代办事项

新增代办事项功能实现原理:

定义一个todoData数组，获取按钮元素(btn)为addTodo，对addTodo设置事件监听，当鼠标按下时获取input标签中的内容，此时将该内容设置为对象添加进入todoData数组中。

删除代办事项功能实现原理:

定义lis获取所有的li标签，遍历lis，取得每个li标签中的span元素和p元素，为span元素添加事件监听，当鼠标按下时则将该li标签移除。并获取此时p元素中的内容在数组todoData中的位置，在数组中移除该元素。

总结

本篇文章就到此为止啦，本人经验水平有限，难免会有纰漏，欢迎指正。如觉得本文对你有帮助的话，欢迎点赞收藏，感谢支持🌹🌹。