原生JavaScript中如何实现todolist功能

来源：懂视网责编：小采时间：2020-11-27 19:42:09

原生JavaScript中如何实现todolist功能

原生JavaScript中如何实现todolist功能:本篇文章给大家介绍了通过原生JavaScript实现todolist功能相关知识点，对此有需要的朋友可以学习下。该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。主要功能：将用户输入添加至待办项可以对todolist进行

推荐度：

点击下载本文 文档为doc格式

导读原生JavaScript中如何实现todolist功能:本篇文章给大家介绍了通过原生JavaScript实现todolist功能相关知识点，对此有需要的朋友可以学习下。该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。主要功能：将用户输入添加至待办项可以对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"值进行分类。

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

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

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

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

删除相应项，并加载

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

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

清楚本地缓存

一系列事件的监听

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;
}

最后的实现效果