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 帮你把要做的事情列出来,一项一项,类似思维导图. ...
随机推荐
- forward declaration of class 错误
在使用Qt的时候遇到这个错误,查了一下发现,是因为我没有正确的使用前置声明. #ifndef FIRSTPAGE_H #define FIRSTPAGE_H #include "ui_dia ...
- Ecshop安装的坑，建议不要使用！
最近因为工作的需要,安装了下ecshop,这个曾经的火爆开源程序,现在也呈现出疲态. 1.请看官方的运行环境推荐: 服务器端运行环境推荐·php版本5.0以上5.3以下的版本(推荐使用5.2系列版本) ...
- 4个著名VCS的比较
特征 CVS Git Mercurial Subversion 是否原子提交 CVS: 没有. CVS提交不是原子的 Git: 是的. 提交都是原子的 Mercurial: 是的 Subversion ...
- C语言 · 完数
算法训练 完数 时间限制:1.0s 内存限制:512.0MB 问题描述 一个数如果恰好等于它的因子之和,这个数就称为“完数”.例如,6的因子为1.2.3,而6＝1+2+3,因此6就是 ...
- [fork]Linux中的fork函数详解
---------------------------------------------------------------------------------------------------- ...
- PostgreSQL视频去重 图片去重系列1
PostgreSQL 在视频.图片去重,图像搜索业务中的应用 图片搜索 PostgreSQL的图像搜索插件使用了非常主流的Haar wavelet技术对图像进行变换后存储 gist 索引方法(支持pa ...
- BI开发之——Mdx基础语法(转至指尖流淌)
Mdx为MultiDimensional Expressions的缩写,多维表达式,是标准的OLAP查询语言.在多数OLAPServer都提供Mdx支持,如Microsoft Sql Server ...
- 工具类之Mutex
Mutex在Android4.4的源代码包的./system/core/include/utils/Mutex.h中定义并且实现. 我们先复习一下Mutex在Linux中功能: Mutex出生的意义就 ...
- java基础知识总结8(数据库篇1)
一. Oracle的安装(windowXP.win7.Linux)和卸载 1.1 Oracle的安装 1.1.1 在WindowsXP.Win7下安装 第一:解压win32_11gR2_databas ...
- 3% of users browse with IE9 and 14% of users have a disability. Why do we only cater for the former?
我想要用一个否定声明来開始我的文章:对于怎样创造一个易于用户体验的站点,我也不是了解非常多. 让作为一个资深开发人员的我操心的是,我在并没有获得太多关于这个主题(指怎样创造一个易于用户体验的站点)的实 ...