5.2 - ToDoList
一、ToDoList需求
参考链接http://www.todolist.cn/
1.将用户输入添加至待办项
2.可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组
3.todolist的每一项可删除和编辑
4.下方有clear按钮，并清空所有todolist项
二、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ToDoList-最简单的待办事项列表</title>
<meta name="description" content="ToDoList无须注册即可使用，数据存储在用户浏览器的html5本地数据库里，是最简单最安全的待办事项列表应用！">
<link rel="stylesheet" href="./css/index.css"> </head>
<body>
<div class="wrap">
<!--顶部-->
<div class="header">
<form action="javascript:postAction()" id="form">
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required = "required" autocomplete="off">
</form>
</div> <!--内容区域-->
<div class="content">
<h2>
正在进行
<span id="todocount">0</span>
</h2>
<ul id="todolist"></ul>
<h2>
已经完成
<span id="donecount">0</span>
</h2>
<ul id="donelist"></ul>
</div> <!--底部-->
<div class="footer">
<span>Copyright © 2014 todolist.cn </span>
<a href="javascript:clear();">clear</a>
</div>
</div> <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
三、css
*{ padding:; margin:;}
body{ background-color: #cdcdcd;}
.header{ background-color:#333; height: 50px; line-height: 50px; }
#form{ width: 600px;margin: 0 auto; overflow: hidden;}
#form label{color: #ddd;font-size: 24px;float: left; cursor: pointer;}
#form input{ float: right; width: 60%;height: 26px;text-indent: 10px; border-radius: 5px; border: none;
margin-top: 12px; outline: none; box-shadow: 2px 2px 0.8px rgba(0,0,0,0.3) inset;}
.content{ width: 600px; margin: 20px auto;}
h2{ position: relative; margin: 15px 0;}
h2 span{ position: absolute; right: 5px; display: inline-block; background-color: #e6e6fa; font-size: 14px;
color: #666;text-align: center;height: 22px; line-height: 22px; top: 5px; padding: 0 5px;border-radius: 20px;}
ul{ list-style: none; overflow: hidden;}
ul li{ overflow: hidden; height: 32px; line-height: 32px; background-color: #fff; border-radius: 3px;
border-left: 5px solid #629a9c; padding: 0 10px; margin-bottom: 10px;}
ul li input[type='checkbox']{ float: left; width: 22px; height: 22px; margin: 6px 5px 0 0;}
ul li input[type='text']{ float: left; width: 80%; text-indent: 5px; height: 26px; line-height: 27px; margin: 2px 0;
outline: none; border: none;}
ul li a{ float: right; width:14px;background-color: #ccc; color: white;border: 6px double #fff;margin-top: 3px;
border-radius: 14px; text-align: center;font-weight: bold; cursor: pointer; line-height: 14px;}
#donelist li{ background-color: #e6e6e6; border-left: 5px solid #b3b3b3;}
#donelist li input[type='text']{ background-color: #e6e6e6;}
.footer{ width: 600px; margin: 0 auto; color: #666; font-size: 14px; text-align: center; margin-top: 20px;}
.footer a{ color: #999; text-decoration: none;}
四、js
var todoC = 0;
var doneC = 0; var todolist = document.getElementById('todolist');
var donelist = document.getElementById('donelist'); var todoCount = document.getElementById('todocount');
var doneCount = document.getElementById('donecount'); // 添加ToDo
function postAction() {
var title = document.getElementById('title'); if(title.value === ""){
alert('内容不能为空！')
}else{
var li = document.createElement('li');
li.innerHTML = '<input type="checkbox" onchange="update();"><input class="title" type="text" onchange="change();" onclick="edit();"><a href="javascript:remove();">-</a>'; if(todoC === 0){ // 第一次添加元素 appendChild
todolist.appendChild(li);
}else{
todolist.insertBefore(li,todolist.children[0]);
}
var txtTitle = document.getElementsByClassName('title')[0];
txtTitle.value = title.value; loop('todolist');
todoC++;
todoCount.innerText = todoC; title.value = "";
}
} //循环 每次添加不同的 i 值
function loop(str) {
var list = null;
str==='todolist' ? list = todolist : list = donelist; childs = list.childNodes;
for(var i=0; i<childs.length; i++){
childs[i].children[0].setAttribute('onchange','update("'+i+'","'+str+'")');
childs[i].children[1].setAttribute('onclick','edit("'+i+'","'+str+'")');
childs[i].children[1].setAttribute('onchange','change("'+i+'","'+str+'","'+childs[i].children[1].value+'")');
childs[i].children[2].setAttribute('href','javascript:remove("'+i+'","'+str+'")');
}
} //update 方法
function update(n,str) {
var list = null;
str==='todolist' ? list = todolist : list = donelist; var li = null;
childs = list.childNodes;
for(var i=0; i<childs.length; i++){
if(i===Number(n)){
li = childs[i];
}
}
remove(n,str); // 删除原有的，得到li 并刷新了原有的li if(str==='todolist'){
if(doneC === 0){ // 第一次添加元素 appendChild
donelist.appendChild(li);
}else{
donelist.insertBefore(li,donelist.children[0]);
}
loop('donelist');
doneC++;
doneCount.innerText = doneC;
}else if(str === 'donelist'){
todolist.appendChild(li);
loop('todolist');
todoC++;
todoCount.innerText = todoC;
}
} // edit 方法 编辑title
function edit(n,str) {
var list = null;
str==='todolist' ? list = todolist : list = donelist;
childs = list.childNodes;
for(var i=0; i<childs.length; i++){
if(i===Number(n)){
childs[i].children[1].style.border = '1px solid #ccc';
}
}
} // change 方法 失去焦点
function change(n,str,oldValue) {
var list = null;
str==='todolist' ? list = todolist : list = donelist;
childs = list.childNodes;
for(var i=0; i<childs.length; i++){
if(i===Number(n)){
childs[i].children[1].style.border = 'none';
if(childs[i].children[1].value === ""){
alert('内容不能为空');
childs[i].children[1].value = oldValue;
}
}
}
loop(str);
} //清除单个列表
function remove(n,str) {
var list = null;
if(str==='todolist'){
list = todolist;
todoC--;
todoCount.innerText = todoC;
}else if(str==='donelist'){
list = donelist;
doneC--;
doneCount.innerText = doneC;
} childs = list.childNodes;
for(var i=childs.length-1; i>=0; i--){
if(i===Number(n)){
list.removeChild(childs[n]);
}
}
loop(str); } // 清除所有列表
function clear() {
childs1 = todolist.childNodes;
for(var i= childs1.length-1 ; i >= 0 ; i--){
todolist.removeChild(childs1[i]);
}
childs2 = donelist.childNodes;
for(var j = childs2.length-1 ; j >= 0 ; j-- ){
donelist.removeChild(childs2[j]);
} todoC = 0;
doneC = 0;
todoCount.innerText = todoC;
doneCount.innerText = doneC;
}
5.2 - ToDoList的更多相关文章
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- 重写官方TodoList，对于初学react+redux的人来说，很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- [vue案例的知识点]todo-list
文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...
- 用vuejs实现一个todolist项目
用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...
- 基于angular写的一个todolist
对于新手来说,使用angularjs写一个todolist可以快速入门
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- jquery实现TODOList
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Android程序ToDoList增加配置项页面
本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference).这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后 ...
- Android程序ToDoList
本文的目的是创建一个简单的ToDoList列表. 这个应用的功能是记录我的代办事项,简单到不需要本地存储,所有的代办事项都只是存储在内存中,就是只有程序打开的时候可以增加查看代办事项,当程序关闭的时候 ...
- ToDoList：一款非常优秀的任务管理软件 —— 工具类
ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划.这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图. ...
随机推荐
- 关闭IOS更新功能(ios4/5/6)
防止IOS升级: 工具:ifunbox 展开/System/Library/LaunchDaemons,将下面4个文件删除(不推荐)或者改名(后缀也得改),改名后记得必须重启. com.apple.m ...
- python 快速获取文件类型
- jquery 查找元素
/************ 查找父元素 *************/ //closest()方法 $("#mytd1").bind("click",functi ...
- 混合模式程序集是针对“v2.0.50727”版的运行时生成的
混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集. 由于“system.data.sqlite.dll”不完整造成的. 在 ...
- Android开发艺术探索读书笔记——进程间通信
1. 多进程使用场景 1) 应用某些模块由于特殊需求须要执行在单独进程中. 如消息推送,使消息推送进程与应用进程能单独存活,消息推送进程不会由于应用程序进程crash而受影响. 2) 为加大一个应用可 ...
- 演练：创建和注册自定义 HTTP 模块
本演练演示自定义 HTTP 模块的基本功能. 对于每个请求,都需要调用 HTTP 模块以响应 BeginRequest 和 EndRequest 事件. 因此,该模块在处理请求之前和之后运行. 如果 ...
- 《高性能MySQL》读书笔记(1)
慢查询 当一个资源变得效率低下的时候,应该了解一下为什么会这样.有如下可能原因:1.资源被过度使用,余量已经不足以正常工作.2.资源没有被正确配置3.资源已经损坏或者失灵 因为慢查询,太多查询的实践过 ...
- codeforces 429 On the Bench dp+排列组合 限制相邻元素，求合法序列数。
限制相邻元素,求合法序列数. /** 题目:On the Bench 链接:http://codeforces.com/problemset/problem/840/C 题意:求相邻的元素相乘不为平方 ...
- ubuntu14.04中安装jdk
1. 下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 将下载的 .g ...
- thinkPHP 上传文件的中文乱码
最新版本~用了里面的上传文件类,发现在保存文件原本名称的时候当有中文名的时候保存文件会显示乱码,看了下源代码发现在Tp上传驱动那里有点问题. // if (!move_uploaded_file($f ...