一、介绍
todolist，即待办事项。在windows android ios上参考微软家出的那个To-Do应用，大概就是那样的。我这个更简单，功能只有“待办” “已完成”两项，并且是在浏览器打开的。
二、界面和文件结构这些...
实际在浏览器中的网页如下： 
在subline中的文件结构有index.html、index.css、index.js各一个，如下图：
三、程序
参考注释即可看懂。
（1）index.html文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- http-equiv指定文档的内容类型和编码类型 --> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <!-- name属性 视图和描述 name+content --> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 8 <title>ToDoList—最简单的待办事项列表</title> 9 <meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！" /> 10 <!-- 外接式css --> 11 <link rel="stylesheet" href="./index.css"> 12 </head> 13 <body> 14 <!-- 头部:在这添加任务 --> 15 <div class="header"> 16 <div class="box"> 17 <form action="javascript:postaction()" id="form"> 18 <!-- for将label标签绑定到input --> 19 <label for="title">ToDoList</label> 20 <!-- required规定提交表单之前有必填字段 autocomplete:自动补齐--> 21 <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> 22 </form> 23 </div> 24 </div> 25 <!-- 主体：在这进行任务和已完成 --> 26 <div class="content"> 27 <h2 onclick="save()">正在进行 <span id="todocount"></span></h2> 28 <ol id="todolist" class="demo-box"> 29 </ol> 30 <h2>已经完成 <span id="donecount"></span></h2> 31 <ul id="donelist"> 32 </ul> 33 </div> 34 <!-- 脚部：印记和全清除按钮 --> 35 <div class="footer"> 36 Copyright © 2018 todolist.cn <a href="javascript:clear();">clear</a> 37 </div> 38 <!-- 外接式js --> 39 <script type="text/javascript" src="./index.js"></script> 40 </body> 41 </html>
index.html
（2）index.css文件
1 /*清除默认样式 并设置简单样式*/
2 body {
3 margin: 0;
4 padding: 0;
5 font-size: 16px;
6 background: #CDCDCD;
7 }
8
9 .header {
10 height: 50px;
11 background: #333;
12 /*background: rgba(47,47,47,0.98);*/
13 }
14
15 .header .box,.content{
16 width: 700px;
17 padding: 0 10px;
18 margin: 0 auto;
19 }
20 /*.content{
21 margin: 0 auto;
22 }*/
23
24 label {
25 float: left;
26 width: 100px;
27 line-height: 50px;
28 color: #DDD;
29 font-size: 24px;
30 /*鼠标悬停样式 一只手*/
31 cursor: pointer;
32 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
33 }
34
35 .header input {
36 float: right;
37 width: 60%;
38 height: 24px;
39 margin-top: 12px;
40 /*首行缩进10px*/
41 text-indent: 10px;
42 /*圆角边框 好看不止一点点*/
43 border-radius: 5px;
44 /*盒子阴影 inset内阴影*/
45 box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
46 border: none
47 }
48 /*选中输入框 轮廓的宽度为0*/
49 input:focus {
50 outline-width: 0;
51 }
52 /*父相子绝*/
53 h2 {
54 position: relative;
55 }
56
57 span {
58 position: absolute;
59 top: 2px;
60 right: 5px;
61 /*设置行内块 有宽高*/
62 display: inline-block;
63 padding: 0 5px;
64 height: 20px;
65 border-radius: 20px;
66 background: #E6E6FA;
67 line-height: 22px;
68 text-align: center;
69 color: #666;
70 font-size: 14px;
71 }
72 /*清除ol和ul标签的默认样式*/
73 ol,ul {
74 padding: 0;
75 list-style: none;
76 }
77
78 li {
79 height: 32px;
80 line-height: 32px;
81 background: #fff;
82 position: relative;
83 margin-bottom: 10px;
84 padding: 0 45px;
85 border-radius: 3px;
86 border-left: 5px solid #629A9C;
87 box-shadow: 0 1px 2px rgba(0,0,0,0.07);
88 }
89 /*任务单选框*/
90 li input {
91 position: absolute;
92 top: 2px;
93 left: 10px;
94 width: 22px;
95 height: 22px;
96 cursor: pointer;
97 }
98 /*任务内容*/
99 p {
100 margin: 0;
101 }
102 /*任务内容的文本输入框，用来修改里面的内容*/
103 li p input {
104 top: 3px;
105 left: 40px;
106 width: 70%;
107 height: 20px;
108 line-height: 14px;
109 text-indent: 5px;
110 font-size: 14px;
111 }
112
113 ul li {
114 border-left: 5px solid #999;
115 /*不透明度 0完全透明~1完全不透明*/
116 opacity: 0.5;
117 }
118 /*勾选按钮*/
119 li a {
120 position: absolute;
121 top: 2px;
122 right: 5px;
123 display: inline-block;
124 width: 14px;
125 height: 12px;
126 border-radius: 14px;
127 border: 6px double #FFF;
128 background: #CCC;
129 line-height: 14px;
130 text-align: center;
131 color: #FFF;
132 font-weight: bold;
133 font-size: 14px;
134 cursor: pointer;
135 }
136
137 .footer {
138 color: #666;
139 font-size: 14px;
140 text-align: center;
141 }
142
143 .footer a {
144 /*color: #666;*/
145 text-decoration: none;
146 color: #999;
147 }
index.css
（3）index.js文件
1 function clear() {
2 localStorage.clear();
3 load();
4 }
5
6 function postaction() {
7 // 获取title节点
8 var title = document.getElementById("title");
9 if (title.value.trim() == "") {
10 alert("内容不能为空");
11 } else {
12 var data = loadData();
13 var todo = { "title": title.value, "done": false };
14 data.push(todo);
15 saveData(data);
16 var form = document.getElementById("form");
17 form.reset();
18 load();
19 }
20 }
21
22 function loadData() {
23 var collection = localStorage.getItem("todo");
24 if (collection != null) {
25 return JSON.parse(collection);
26 } else return [];
27 }
28
29 function saveSort() {
30 var todolist = document.getElementById("todolist");
31 var donelist = document.getElementById("donelist");
32 var ts = todolist.getElementsByTagName("p");
33 var ds = donelist.getElementsByTagName("p");
34 var data = [];
35 for (i = 0; i < ts.length; i++) {
36 var todo = { "title": ts[i].innerHTML, "done": false };
37 data.unshift(todo);
38 }
39 for (i = 0; i < ds.length; i++) {
40 var todo = { "title": ds[i].innerHTML, "done": true };
41 data.unshift(todo);
42 }
43 saveData(data);
44 }
45
46 function saveData(data) {
47 localStorage.setItem("todo", JSON.stringify(data));
48 }
49
50 function remove(i) {
51 var data = loadData();
52 var todo = data.splice(i, 1)[0];
53 saveData(data);
54 load();
55 }
56
57 function update(i, field, value) {
58 var data = loadData();
59 var todo = data.splice(i, 1)[0];
60 todo[field] = value;
61 data.splice(i, 0, todo);
62 saveData(data);
63 load();
64 }
65
66 function edit(i) {
67 load();
68 var p = document.getElementById("p-" + i);
69 title = p.innerHTML;
70 p.innerHTML = "<input id=‘input-" + i + "‘ value=‘" + title + "‘ />";
71 var input = document.getElementById("input-" + i);
72 input.setSelectionRange(0, input.value.length);
73 input.focus();
74 input.onblur = function() {
75 if (input.value.length == 0) {
76 p.innerHTML = title;
77 alert("内容不能为空");
78 } else {
79 update(i, "title", input.value);
80 }
81 };
82 }
83
84 function load() {
85 var todolist = document.getElementById("todolist");
86 var donelist = document.getElementById("donelist");
87 var collection = localStorage.getItem("todo");
88 if (collection != null) {
89 var data = JSON.parse(collection);
90 var todoCount = 0;
91 var doneCount = 0;
92 var todoString = "";
93 var doneString = "";
94 for (var i = data.length - 1; i >= 0; i--) {
95 if (data[i].done) {
96 doneString += "<li draggable=‘true‘><input type=‘checkbox‘ onchange=‘update(" + i + ",\"done\",false)‘ checked=‘checked‘ />" +
97 "<p id=‘p-" + i + "‘ onclick=‘edit(" + i + ")‘>" + data[i].title + "</p>" +
98 "<a href=‘javascript:remove(" + i + ")‘>-</a></li>";
99 doneCount++;
100 } else {
101 todoString += "<li draggable=‘true‘><input type=‘checkbox‘ onchange=‘update(" + i + ",\"done\",true)‘ />" +
102 "<p id=‘p-" + i + "‘ onclick=‘edit(" + i + ")‘>" + data[i].title + "</p>" +
103 "<a href=‘javascript:remove(" + i + ")‘>-</a></li>";
104 todoCount++;
105 }
106 };
107 todocount.innerHTML = todoCount;
108 todolist.innerHTML = todoString;
109 donecount.innerHTML = doneCount;
110 donelist.innerHTML = doneString;
111 } else {
112 todocount.innerHTML = 0;
113 todolist.innerHTML = "";
114 donecount.innerHTML = 0;
115 donelist.innerHTML = "";
116 }
117 }
118
119 window.onload = load;
120
121 // window.addEventListener("storage", load, false);
index.js
原文地址：https://www.cnblogs.com/NuoMiGao/p/10103271.html
时间： 2024-10-10 10:17:54