title:【Nativejavascriptproject】Golist10date:2022-01-0920:27:51tags:Nativejavascriptprojectcategories:30nativejavascriptprojectsAuthor:?IaineWan1简介：30DayChallenge是由WesBos设计的为期30天的原生js编程挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。这个项目是第10天的“待办事项”项目。我添加了双击删除任务和添加任务的功能。玩得开心网站！?(^?^*)网页效果：https://janice143.github.io/g...项目描述利用一些checkbox类型的输入元素，并在js中实现特定功能，设计了待办事项列表页面。在网页中，可以通过点击复选框来标记任务状态，按住shift键可以实现对任务的多重勾选。您还可以通过单击“添加”来添加任务，通过双击来删除已完成的任务。项目的关键类型是checkbox的input元素的点击事件。回调函数为clickCheke.shiftKeythis.checked标记最后一次点击输入，多选内输入类型为文本的input元素的change事件。回调函数由displayTask使用createElement创建，元素使用append在指定节点后添加html输入文本并输入文本，this.value=''监听双击事件，移除该元素的双击事件task复选框后面的text，回调函数为removeTaske.path[1].remove()项目流程的html部分进入文本框input，定位到文本框上的div元素。点击后显示：无。四个类名都是task-item，也就是复选框和任务文本p的占位符标签。新添加的任务会在这里追加Js部分，获取所有checkbox类型的input，遍历点击事件，点击事件就是clickCheck多选操作的原理if(e.shiftKey&&this.checked)inputChecks.forEach(inputCheck=>{console.log(inputCheck===this||inputCheck===lastChecked);if(inputCheck===this||inputCheck===lastChecked){inBetween=!inBetween;//console.log('开始');}//console.log('InBetween',inBetween);if(inBetween){inputChecked.checked=true;}})获取所有p元素，遍历双击事件double-点击事件为removeTask找到对应的任务路径，remove是可以functionremoveTask(e){console.log(e.path[1].remove());}获取类名add-icon的元素，监听点击事件，点击隐藏页面元素。隐藏和显示页面元素有两种方法：方法一：在元素中设置displayvartstyleattribute=document.getElementById('test');//选择id为test的元素t.style.display='没有任何';//隐藏选中的元素t.style.display='block';//以块级样式显示2：在元素的样式属性中设置visibilityvart=document.getElementById('test');t.style.visibility='隐藏';//隐藏元素t.style.visibility='visible';//显示元素两者的区别是显示隐藏后不占用原位置，隐藏可见性后仍占用元素位置获取text类型的input元素，监听change事件change事件调用displayTask动态插入html使用createElement创建元素使用append挂载元素监听双击事件functiondisplayTask(){//使用createElement创建元素constnewTaskItem=document.createElement('div');newTaskItem.className='新任务项';consthtml=` ${this.value}
