本机JavaScript实现todolist函数

本项目主要练习js操作dom、事件和事件触发器之间的逻辑关系，以及如何写入缓存和获取缓存。

主要功能：

将用户输入添加到待办事项中，可以对待办事项进行分类，用户可以对将待办事项划分到已完成组中的每一项进行删除和编辑，并将用户输入数据写入localStorage本地缓存，从而保存输入数据，清除域名下的本地缓存，清除所有待办事项的具体功能实现

HTML代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title todolist-prime/title link rel='样式表' href=' yuan sheng . CSS ' rel=' external no follow '/head body标题部分标签为='add_list ' my todolist/标签输入类型='text' id='add_list '名称=' add _ list '占位符='type here '必填/Section/标题div class=' content不完整span id=' todocount '/span/h1ol id='

创建一个数组对象来保存用户输入的数据。数组的每一项都是一个对象。对象的“todo”属性保存用户输入的数据。“done”属性可以理解为用户输入的数据的标签，主要用于对“todo”值进行分类。

每次用户输入数据时，缓存都会更新，输入框也会初始化。

函数add to dolist(e){ varobj _ list={ todo : ' '，//用于存储用户done3360输入的数据false//初始化用户输入的数据属性以便对用户的待办事项进行分类}；document . getelementbyid(' add _ list ')。value=document . getelementbyid(' add _ list '). value . trim()；如果(文档。getelementbyid ('add _ list ')。价值。length===0) {alert('不能为空')；返回；} obj _ list . todo=document . getelementbyid(' add _ list ')。价值；todo list . push(obj _ list)；save DATa(todo list)；document . getelementbyid(' add _ list ')。值=' '；//初始化输入框加载()；//将用户输入的数据添加到DOM node document . getelementbyid(' add _ list ')中。焦点()；}将输入数据添加到dom节点，并根据输入数据属性的值(“done”)对其进行分类。

span style=' font-size :14 px'函数load(){ var todo=document。getelementbyid(' todolit ')、done=document。getelementbyid(' done list ')、todo count=document。getelementbyid(' todo count ')、done count=document。getelementbyid('完成计数')、todoString=' '、todoCount=0、完成计数=0；文件。getelementbyid(' add _ list ').焦点();todo list=LoAdDATa()；//todolist数组对象里若包含用户输入数据，则将其添加至数字正射影像图节点；若为空对象，则初始化页面如果(todolist！=null){ for(var I=0；itodolist.lengthi ){ if(！抛光[i].完成){ todoString='li'//通过待清扫房事件，复选框值有改变则调用更新函数，并改变输入数据"完成"属性的布尔值，这样//下次负载()后，这段数据会进入不同的分组，未完成的事项分入已完成事项组，已完成事项分入未完成事项组//点击事项调用编辑函数//点击"-",调用移动函数输入类型=' checkbox ' onchange=' update(' I '，\'done\ '，true)' ' ' p id=' p-' I ' ' on click=' edit(' I ')'到olist[I].todo '/p ' a onclick=' remove '(' I ')'-/a ' '/Li '；//将每次用户输入的数据，通过节点p利用编号标记，以便后续编辑功能定位todoCount} else { DoneString=' Li '输入类型=' checkbox ' ' ' onchange=' update '(I '，\'done\ '，false)'选中' ' p id=' p-' I ' ' onclick=' edit '(I ')'以olist[I].todo '/p ' a onclick=' remove '(' I ')'-/a ' '/Li '；done count } } todo . innerHTMl=ToDoStringTone . innerHTMl=doneStringtodo count。innerhtml=todo count算完了。innerhtml=完成计数；} else { todo . innerHTMl=done . innerHTMl=todo count。InnerHTML=0；算完了。innerhtml=0；}}/span击事项触发编辑事件，将可编辑表单控件插入段落中，并将用户输入的值通过更新函数对任务列表数组里存储的数据进行更新

函数编辑(一){ var p=文档。getelementbyid(' p-' I)，pContent=p.innerHTML，input tid//通过upadate函数对任务列表数组相应项进行更新，将用户输入的内容写入到任务列表数组相应项的待办事项属性中函数确认(){ if(输入tid。价值。length===0){ p . innerhtml=pContent；警报('内容不能为空');} else { update(i，' todo '，InputId。值)；//修改事项内容后，更新数组里对应项'待办事项'属性的值，以便更新数字正射影像图节点} }//结合按键事件，按下进入键，调用确认函数函数输入(e){ if(e . key code==13){ confirm()；} } p . innerhtml=' input type=' text ' id=' input-' I ' value=' pContent '；输入tid=文档。getelementbyid(' input-' I)；输入TiD。焦点()；input tId . setselectionrange(0，输入id。价值。长度)；输入id。on bulr=确认；//表单控件失去焦点，调用确认函数，即对页面内容进行更新输入TiD。按下onkey回车；//对按键事件进行监控}将数组任务列表相应项的属性("待办事项"或"完成")进行更新，并加载

函数更新(I，field，value){ todolist[I][field]=value；保存数据(待办事项列表)；load()；} 删除相应项，并加载

函数移除(i) { todolist.splice(i，1)；保存数据(待办事项列表)；//相同名称的缓存会覆盖，更新缓存load()；} 将用户数据保存至本地缓存

函数保存数据(数据){本地存储。setitem(' mytodolist '，JSON。stringify(数据))；//JS对象转换成数据对象存进本地缓存}从本地缓存中获取数据，有数据，赋值给托多利斯，这样刷新页面用户数据依旧存在

函数loadData(){ var hisTory=本地存储。getitem(' mytodolist ')；if(hisTory！=null){ 0返回JSON。解析(HistorY)；//JSON对象转换为射流研究…对象} else { return[]；} } 清楚本地缓存

函数clear(){本地存储。clear()；load()；} 一系列事件的监听

window.addEventListener('load '，load)；//页面加载完毕调用负荷函数文件。getelementbyid('清除按钮').onclick=cleardocument。getelementbyid(' add _ list ').onkey press=function(事件){ if(事件。键码===13){ addTodolist()；} };半铸钢钢性铸铁(铸造半钢)

车身{ margin : 0pxpadding : 0pxfont-size : 16px；背景-color : gainsboro；}页眉{高： 50像素背景-颜色：矢车菊蓝；}标题部分{ margin: 0 auto宽度： 40%;}标题部分标签{左侧浮动：线高： 50px/*设置行高和包含块高度一致，以实现行内元素垂直居中*/font-size : 20px；} # add _ list { float:右页边距-top : 11px；宽度： 60%;高度： 24 pxborder-半径： 5pxbox-shadow: 0 1px 0黑色；font-size : 18px文本缩进： 10px}h1 {位置：相对；} h1 span { position : absolutetop : 1pxright : 5pxdisplay :内联块；宽度： 23px高度： 23 pxborder-半径： 23px/*创建圆形标记*/行高： 23pxfont-size : 18px文本对齐：中心；背景# E6E6FA}。内容{宽度： 40%；余量： 0自动} li {位置：相对位置；边距-底部： 10px边界半径： 5pxpadd : 0 10px 8 : 32px box-shadow : 0 1px 0黑色；线高： 32px背景-color : burlywood；列表样式：无；}ol li输入{位置：绝对值；top: 4pxleft: 10px宽度： 20px高度： 20pxcursor:指针；} p { margin : 0；} ol li p { display: inline左边距左： 35px}ol li p输入{ top: 5px左边距左： 35px宽度： 70%;height : 14 px font-size : 14 px；行高： 14px}ol阿利{位置：绝对值；top : 8pxright : 10pxdisplay :内联块；border: 1px边界半径： 50%;宽度： 16pxheight : 16px font-size : 32px；线高： 10px颜色：红色；字体粗细：更粗；光标：指针；背景-颜色：灰色；} #清除{ width : 100pxmargin 3360 0 auto } #清除按钮{ border-color : red；边界半径： 5pxbox-shadow: 0 1px 0黄色；光标：指针；}按钮H3 { font-size : 13px；线高： 13px}最后的实现效果

总结

本项目参考了http://www.todolist.cn/,对代码进行了一些精简，并添加了一些功能。在实现项目的过程中，首先是实现最基本的功能，然后不断地添加增强功能和美化。