这次给大家带来js实现todolist详解，js实现todolist的注意事项有哪些，下面就是实战案例，一起来看一下。
本篇文章给大家介绍了通过原生javascript实现todolist功能相关知识点，对此有需要的朋友可以学习下。
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。
主要功能：
将用户输入添加至待办项
可以对todolist进行分类，用户勾选即将待办项分入已完成组
todolist的每一项可删除和编辑
将用户输入数据写入localstorage本地缓存，实现对输入数据的保存
可以清楚域名下本地缓存，并清空所有todolist项
具体功能的实现
html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todolist-prime</title>
<link rel="stylesheet" href="yuansheng.css" rel="external nofollow" >
</head>
<body>
<header>
<section>
<label for="add_list">my todolist</label>
<input type="text" id="add_list" name="add_list" placeholder="type here" required>
</section>
</header>
<p class="content">
<h1>未完成<span id="todocount"></span></h1>
<ol id="todolist">
</ol>
<h1>已完成<span id="donecount"></span></h1>
<ol id="donelist">
</ol>
</p>
<p id="clear">
<span style="white-space:pre;"> </span><button id="clearbutton"><h3>全部清除</h3></button>
</p>
<script src="todolist-prime.js"></script>
</body>
</html>
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)的值进行分类。
<span style="font-size:14px;">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<todolist.length; i ++){
if(!todolist[i].done){
todostring += "<li>
//通过onchange事件，复选框值有改变则调用update函数，并改变输入数据“done”属性的布尔值，这样
//下次load()后，这段数据会进入不同的分组，未完成的事项分入已完成事项组，已完成事项分入未完成事项组
//点击事项调用edit函数
//点击“-”，调用remove函数
+ <input type='checkbox' onchange='update("+i+", \"done\", true)'>
+ <p id='p-"+i+"' onclick='edit("+i+")'> + todolist[i].todo + </p> +
<a onclick='remove("+i+")'>-</a> +
</li>; //将每次用户输入的数据，通过节点<p>利用id标记，以便后续编辑功能定位
todocount ++;
}
else{
donestring += <li>
+ <input type='checkbox' "
+ "onchange='update("+i+", \"done\", false)' checked>
+ <p id='p-"+i+"' onclick='edit("+i+")'> + todolist[i].todo + </p>
+ <a onclick='remove("+i+")'>-</a>
+ </li>;
donecount ++;
}
}
todo.innerhtml = todostring;
done.innerhtml = donestring;
todocount.innerhtml = todocount;
donecount.innerhtml = donecount;
}
else {
todo.innerhtml = ;
done.innerhtml = ;
todocount.innerhtml = 0;
donecount.innerhtml = 0;
}
}</span>
击事项触发编辑事件，将可编辑表单控件插入段落中，并将用户输入的值通过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 = <input type='text' id='input-"+i+"' value='"+pcontent+"'>;
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;
}
最后的实现效果
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react native使用fetch上传图片
使用import 和require打包js
react事件绑定this的几种方式
以上就是js实现todolist详解的详细内容。