本篇文章向大家介绍利用原生JS实现todolist的常见功能
主要功能：
- 将用户输入添加到所有任务
- 可以对todolist进行分类，用户勾选即将待办项分入已完成组
- todolist的每一项可删除
- 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存
废话不多说，先上运行视频效果：
原生JS实现todolist常用功能
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
font-size: 18px;
list-style: none;
}
header h1 {
height: 80px;
background-color: red;
color: white;
line-height: 80px;
text-align: center;
font-size: 40px;
}
.active{
width: 600px;
margin: 0 auto;
}
.active>input {
width:100%;
height: 35px;
margin: 10px 0 20px 0;
text-indent: 1em;
}
.activemin span{
display: inline-block;
border: 1px solid lightgray;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
margin-left: 20px;
}
.activemin span:first-of-type{
color: red;
border: none;
}
ul{
width: 600px;
margin: 0 auto;
}
ul li{
wid
最低0.47元/天 解锁文章
扫一扫
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
