15 JS应用-todolist任务

需求

1. 将用户输入添加至待办项
2. 可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组
3. todolist的每一项可删除和编辑
4. 下方有clear按钮，并清空所有todolist项

html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 6         <title>ToDoList—最简单的待办事项列表</title>
 7         <meta name="description" content="ToDoList无须注册即可使用!" />
 8         <link rel="stylesheet" href="mystyle.css">
 9     </head>
10     <body>
11         <div class="header">
12             <div class="box">
13                 <form action="javascript:postaction()" id="form">
14                     <label for="title">ToDoList</label>
15                     <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
16                 </form>
17             </div>
18         </div>
19         <div class="content">
20             <h2 onclick="save()">正在进行 <span id="todocount"></span></h2>
21             <ol id="todolist" class="demo-box">
22             </ol>
23             <h2>已经完成 <span id="donecount"></span></h2>
24             <ul id="donelist">
25             </ul>
26         </div>
27         <div class="footer">
28             Copyright &copy; 2019 todolist.cn <a href="javascript:clear();">clear</a>
29         </div>
30         <script type="text/javascript" src="myjs.js"></script>
31     </body>
32 </html>

css

  1 body {
  2     margin: 0;
  3     padding: 0;
  4     font-size: 16px;
  5     background: #CDCDCD;
  6 }
  7
  8 .header {
  9     height: 50px;
 10     background: #333;
 11     background: rgba(47,47,47,0.98);
 12 }
 13
 14 .header .box,.content{
 15     width: 600px;
 16     padding: 0 10px;
 17     margin: 0 auto;
 18 }
 19 .content{
 20     margin: 0 auto;
 21 }
 22
 23 label {
 24     float: left;
 25     width: 100px;
 26     line-height: 50px;
 27     color: #DDD;
 28     font-size: 24px;
 29     cursor: pointer;
 30     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 31 }
 32
 33 .header input {
 34     float: right;
 35     width: 60%;
 36     height: 24px;
 37     margin-top: 12px;
 38     text-indent: 10px;
 39     border-radius: 5px;
 40     box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
 41     border: none
 42 }
 43
 44 input:focus {
 45     outline-width: 0
 46 }
 47
 48 h2 {
 49     position: relative;
 50 }
 51
 52 span {
 53     position: absolute;
 54     top: 2px;
 55     right: 5px;
 56     display: inline-block;
 57     padding: 0 5px;
 58     height: 20px;
 59     border-radius: 20px;
 60     background: #E6E6FA;
 61     line-height: 22px;
 62     text-align: center;
 63     color: #666;
 64     font-size: 14px;
 65 }
 66
 67 ol,ul {
 68     padding: 0;
 69     list-style: none;
 70 }
 71
 72 li input {
 73     position: absolute;
 74     top: 2px;
 75     left: 10px;
 76     width: 22px;
 77     height: 22px;
 78     cursor: pointer;
 79 }
 80
 81 p {
 82     margin: 0;
 83 }
 84
 85 li p input {
 86     top: 3px;
 87     left: 40px;
 88     width: 70%;
 89     height: 20px;
 90     line-height: 14px;
 91     text-indent: 5px;
 92     font-size: 14px;
 93 }
 94
 95 li {
 96     height: 32px;
 97     line-height: 32px;
 98     background: #fff;
 99     position: relative;
100     margin-bottom: 10px;
101     padding: 0 45px;
102     border-radius: 3px;
103     border-left: 5px solid #629A9C;
104     box-shadow: 0 1px 2px rgba(0,0,0,0.07);
105 }
106
107 ol li {
108     cursor: move;
109 }
110
111 ul li {
112     border-left: 5px solid #999;
113     opacity: 0.5;
114 }
115
116 li a {
117     position: absolute;
118     top: 2px;
119     right: 5px;
120     display: inline-block;
121     width: 14px;
122     height: 12px;
123     border-radius: 14px;
124     border: 6px double #FFF;
125     background: #CCC;
126     line-height: 14px;
127     text-align: center;
128     color: #FFF;
129     font-weight: bold;
130     font-size: 14px;
131     cursor: pointer;
132 }
133
134 .footer {
135     color: #666;
136     font-size: 14px;
137     text-align: center;
138 }
139
140 .footer a {
141     color: #666;
142     text-decoration: none;
143     color: #999;
144 }

JS

  1 function $(id) {
  2     return document.getElementById(id);
  3 }
  4
  5 function clear() {
  6     localStorage.clear();
  7     load();
  8 }
  9
 10 function postaction() {
 11     if($('title').value == ''){
 12         alert('不可为空！')
 13     }else{
 14         var data = loadData();
 15         var todo = {'title':$('title').value,'done':false};
 16         data.push(todo);
 17         saveData(data);
 18         $('form').reset();
 19         load();
 20     }
 21 }
 22
 23 function loadData() {
 24     var collection = localStorage.getItem('todo');
 25     if(collection){
 26         return JSON.parse(collection);
 27     }else{
 28         return [];
 29     }
 30 }
 31
 32 function saveData(data) {
 33     localStorage.setItem('todo',JSON.stringify(data))
 34 }
 35
 36 function remove(i) {
 37     var data = loadData();
 38     data.splice(i,1);
 39     saveData(data);
 40     load();
 41 }
 42
 43 function update(i,field,value) {
 44     var data = loadData();
 45     var todo = data.splice(i,1)[0];
 46     todo[field] = value;
 47     data.splice(i,0,todo);
 48     saveData(data);
 49     load();
 50 }
 51
 52 function edit(i) {
 53     load();
 54     var p = document.getElementById('p-'+i);
 55     title = p.innerHtml;
 56     p.innerHTML =  "<input id='input-" + i + "' value='" + title + "' />";
 57     var input = $("input-" + i);
 58     input.setSelectionRange(0,input.value.length);  // 选中value
 59     input.focus();
 60     input.onblur = function () {
 61         if(input.value.length == 0){
 62             p.innerHTML = title;
 63             alert('不能为空！');
 64         }else{
 65             update(i,'title',input.value);
 66         }
 67     }
 68 }
 69
 70 function load() {
 71     var todolist = $('todolist');
 72     var donelist = $('donelist');
 73     var collection = localStorage.getItem('todo');
 74     if(collection != null){
 75         var data = JSON.parse(collection);
 76         var todoCount = 0;
 77         var doneCount = 0;
 78         var todoString = "";
 79         var doneString = "";
 80         for(var i = data.length - 1;i >= 0; i--){
 81             if(data[i].done){
 82                 doneString += "<li draggable='true'><input type='checkbox' οnchange='update(" + i + ",\"done\",false)' checked='checked' />" +
 83                     "<p id='p-" + i + "' οnclick='edit(" + i + ")'>" + data[i].title + "</p>" +
 84                     "<a href='javascript:remove(" + i + ")'>-</a></li>";
 85                 doneCount++;
 86             }else{
 87                 todoString += "<li draggable='true'><input type='checkbox' οnchange='update(" + i + ",\"done\",true)' />" +
 88                     "<p id='p-" + i + "' οnclick='edit(" + i + ")'>" + data[i].title + "</p>" +
 89                     "<a href='javascript:remove(" + i + ")'>-</a></li>";
 90                 todoCount++;
 91             }
 92         }
 93         todocount.innerHTML = todoCount;
 94         todolist.innerHTML = todoString;
 95         donecount.innerHTML = doneCount;
 96         donelist.innerHTML = doneString;
 97     }else{
 98         todocount.innerHTML = 0;
 99         todolist.innerHTML = "";
100         donecount.innerHTML = 0;
101         donelist.innerHTML = "";
102     }
103 }
104
105 window.onload = load;

转载于:https://www.cnblogs.com/znyyy/p/11121958.html

15 JS应用-todolist任务相关推荐

（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
js实现TODOlist
js实现todolist 一. 需求分析能显示当前日期输入代办事项,在下列代办列表展示已经完成的代办移入"已完成" 重要事件标红并且置顶能够删除代办事项倒计时二.最终作 ...
js实现 todoList
原本用js实现了todoList,包含基本的增删功能,并且实现了本地存储功能,还写的有一个好看的倒计时效果,因为不小心把代码覆盖了,找不回来了,就没有再加倒计时的效果,所以就用jQuery快速完成了这 ...
JS学习日志15 -- JS基础--忍者代码
前言从头开始对javascript进行学习,每天定个小目标,学习一点,期待学习完后,对js的认知会发生什么变化~~ :JS基础知识一.忍者代码过去的程序员忍者使用这些技巧,来使代码维护者的头脑更 ...
适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点
重新学习vue,将实例中的ToDoList做了些调整.增加了些功能功能: 1.添加要做事项,支持回车完成添加,也可以点击按钮添加,添加后input清空 2.待做事项,是一个有序列表 3.列表可以删除 ...
15+ JS简写骚操作，让你的代码“秀”起来
译者:王二狗博客:掘金.思否.知乎.简书.头条.CSDN 点赞再看,养成习惯,你们的支持是我持续分享的最大动力
源生的html属性js,源生JS怎样实现todolist功能
这次给大家带来源生JS怎样实现todolist功能,源生JS实现todolist功能的注意事项有哪些,下面就是实战案例,一起来看一下. 该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系, ...
html js不触发_「万字整理」这里有一份Node.js入门指南和实践,请注意查收 ??
前言什么是 Node.js 呢 ? JS 是脚本语言,脚本语言都需要一个解析器才能运行.对于写在 HTML 页面里的 JS,浏览器充当了解析器的角色.而对于需要独立运行的 JS,NodeJS 就是一 ...
有趣的HTML实例（十四）窗边风景动画（css+js）
不要憎恨你的敌人,那会影响你的判断力. --<教父> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 index.html style.css ...

15 JS应用-todolist任务

需求

css

JS

15 JS应用-todolist任务相关推荐

最新文章

热门文章