本篇文章给大家介绍了通过原生javascript实现todolist功能相关知识点，对此有需要的朋友可以学习下。

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

主要功能：

将用户输入添加至待办项

可以对todolist进行分类，用户勾选即将待办项分入已完成组

立即学习“Java免费学习笔记（深入）”；

todolist的每一项可删除和编辑

将用户输入数据写入localStorage本地缓存，实现对输入数据的保存

可以清楚域名下本地缓存，并清空所有todolist项

具体功能的实现

HTML代码

nbsp;html>    
  
   My todolist     
 
 
  
未完成
  
  
  
已完成
  
  
  
 
全部清除 
 

登录后复制

JS代码及分析

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

每次用户输入完数据，都要更新缓存，并初始化输入框。

function addTodolist(e) { var obj_list = {  todo: "", //用于存储用户输入的数据  done: false  //初始化用户输入的数据属性，以便对用户待办事项进行分类 }; document.getElementById("add_list").value = document.getElementById("add_list").value.trim(); if (document.getElementById("add_list").value.length === 0){  alert("不能为空");  return; } obj_list.todo = document.getElementById("add_list").value; todolist.push(obj_list); saveData(todolist); document.getElementById("add_list").value = "";  //初始化输入框 load();  //将用户输入的数据添加至dom节点 document.getElementById("add_list").focus();}

登录后复制

将输入的数据添加至dom节点，并且根据输入数据属性(“done”)的值进行分类。

function load(){ var todo = document.getElementById("todolist"),  done = document.getElementById("donelist"),  todocount = document.getElementById("todocount"),  donecount = document.getElementById("donecount"),  todoString = "",  doneString = "",  todoCount = 0,  doneCount = 0; document.getElementById("add_list").focus(); todolist = loadData(); //todolist数组对象里若包含用户输入数据，则将其添加至dom节点；若为空对象，则初始化页面。 if (todolist != null){  for (var i=0; i"//通过onchange事件，复选框值有改变则调用update函数，并改变输入数据“done”属性的布尔值，这样//下次load()后，这段数据会进入不同的分组，未完成的事项分入已完成事项组，已完成事项分入未完成事项组//点击事项调用edit函数//点击“-”，调用remove函数     + ""     + "
" + todolist[i].todo + "
" +     "-" +     ""; //将每次用户输入的数据，通过节点
利用id标记，以便后续编辑功能定位    todoCount ++;   }   else{    doneString += "
"     + ""     + "
" + todolist[i].todo + "
"     + "-"     + "
";    doneCount ++;   }  }  todo.innerHTML = todoString;  done.innerHTML = doneString;  todocount.innerHTML = todoCount;  donecount.innerHTML = doneCount; } else {  todo.innerHTML = "";  done.innerHTML = "";  todocount.innerHTML = 0;  donecount.innerHTML = 0; }}

登录后复制

击事项触发编辑事件，将可编辑表单控件插入段落中，并将用户输入的值通过update函数对todolist数组里存储的数据进行更新

function edit(i) { var p = document.getElementById('p-' + i),  pContent = p.innerHTML,  inputId;//通过upadate函数对todolist数组相应项进行更新，将用户输入的内容写入到todolist数组相应项的todo属性中 function confirm() {  if (inputId.value.length === 0) {   p.innerHTML = pContent;   alert("内容不能为空");  }  else {   update(i, "todo", inputId.value); //修改事项内容后，更新数组里对应项"todo"属性的值，以便更新dom节点  } }//结合keypress事件，按下enter键，调用confirm函数 function enter(e) {  if (e.keyCode == 13){   confirm();  } } p.innerHTML = ""; inputId = document.getElementById('input-'+i); inputId.focus(); inputId.setSelectionRange(0, inputId.value.length); inputId.onblur = confirm; //表单控件失去焦点，调用confirm函数，即对页面内容进行更新 inputId.onkeypress = enter;  //对按键事件进行监控}

登录后复制

将数组todolist相应项的属性（“todo”或“done”）进行更新，并加载

function update(i, field, value) {  todolist[i][field] = value;  saveData(todolist);  load(); }

登录后复制

删除相应项，并加载

function remove(i) {  todolist.splice(i, 1);   saveData(todolist); //相同名称的缓存会覆盖，更新缓存   load(); }

登录后复制

将用户数据保存至本地缓存

function saveData(data) {  localStorage.setItem("mytodolist", JSON.stringify(data)); //JS对象转换成JSON对象存进本地缓存 }

登录后复制

从本地缓存中获取数据，有数据，赋值给todolist，这样刷新页面用户数据依旧存在

function loadData() {  var hisTory = localStorage.getItem("mytodolist");  if(hisTory !=null){   return JSON.parse(hisTory);  //JSON对象转换为JS对象  }  else { return []; } }

登录后复制

清楚本地缓存

function clear() {  localStorage.clear();  load(); }

登录后复制

一系列事件的监听

window.addEventListener("load", load); //页面加载完毕调用load函数 document.getElementById("clearbutton").onclick = clear; document.getElementById("add_list").onkeypress = function (event) {  if(event.keyCode === 13){   addTodolist();  } };

登录后复制

CSS

body {  margin: 0px;  padding: 0px;  font-size: 16px;  background-color: gainsboro;}header {  height: 50px;  background-color: cornflowerblue;}header section {  margin: 0 auto;  width: 40%;}header section label {  float: left;  line-height: 50px; /*设置line-height和包含块高度一致，以实现行内元素垂直居中*/  font-size: 20px;}#add_list {  float: right;  margin-top: 11px;  width: 60%;  height: 24px;  border-radius: 5px;  box-shadow: 0 1px 0 black;  font-size: 18px;  text-indent: 10px;}h1 {  position: relative;}h1 span {  position: absolute;  top: 1px;  right: 5px;  display: inline-block;  width: 23px;  height: 23px;  border-radius: 23px;  /*创建圆形标记*/  line-height: 23px;  font-size: 18px;  text-align: center;  background: #E6E6FA;}.content {  width: 40%;  margin: 0 auto;}li {  position: relative;  margin-bottom: 10px;  border-radius: 5px;  padding: 0 10px;  height: 32px;  box-shadow: 0 1px 0 black;  line-height: 32px;  background-color: burlywood;  list-style: none;}ol li input {  position: absolute;  top: 4px;  left: 10px;  width: 20px;  height: 20px;  cursor: pointer;}p{  margin: 0;}ol li p {  display: inline;  margin-left: 35px;}ol li p input{  top: 5px;  margin-left: 35px;  width: 70%;  height: 14px;  font-size: 14px;  line-height: 14px;}ol li a {  position: absolute;  top: 8px;  right: 10px;  display: inline-block;  border: 1px;  border-radius: 50%;  width: 16px;  height: 16px;  font-size: 32px;  line-height: 10px;  color: red;  font-weight: bolder;  cursor: pointer;  background-color: gray;}#clear {  width: 100px;  margin: 0 auto;}#clearbutton {  border-color: red;  border-radius: 5px;  box-shadow: 0 1px 0 yellow;  cursor: pointer;}button h3{  font-size: 13px;  line-height: 13px;}

登录后复制

最后的实现效果

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

通过Angular利用内容投射向组件输入ngForOf模板的方法步骤有哪些？

通过axios全局请求参数设置请求以及返回拦截器操作步骤有哪些？

有关处理axios拦截设置和错误处理的方法？

以上就是原生JavaScript中如何实现todolist功能的详细内容，更多请关注【创想鸟】其它相关文章！