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 &copy; 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 帮你把要做的事情列出来,一项一项,类似思维导图. ...

随机推荐

js基本知识6
1.2 复习 1. 节点网页是有很多的节点组成的 . 元素节点指的是 : 标签 li span 文本节点属性节点父子兄弟父 parentNode nextSibling 孩子 childNo ...
am335x -- led 控制
#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <string.h&g ...
hdu4746 Mophues 莫比乌斯
/** 题目:hdu4746 Mophues 链接:http://acm.hdu.edu.cn/showproblem.php?pid=4746 题意:求x,y在给定范围内gcd(x,y)分解素因子的 ...
Android基础总结（二）布局，存储
常见布局相对布局 RelativeLayout 组件默认左对齐.顶部对齐设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...
List接口的实现类与ArrayList相似，区别是Vector是重量级的组件，使用使消耗的资源比较多
List接口的实现类(Vector)(与ArrayList相似,区别是Vector是重量级的组件,使用使消耗的资源比较多.) 结论:在考虑并发的情况下用Vector(保证线程的安全). 在不考虑并发的 ...
java开发总体知识复习
上一篇发了一个找工作的面经, 找工作不宜, 希望这一篇的内容能够帮助到大家. 对于这次跳槽找工作, 我准备了挺长的时间, 其中也收集了很多比较好的笔试面试题, 大都是一些常用的基础, 很多都是由于时间 ...
backbone.js初探(转)
BackBone是JavaScript frameworks for creating MVC-like web applications,最近流行的用来建立单页面web application的工具 ...
No JSON object could be decoded
json中的true 不能写成True,否则不能被解析.
PHPExcel导出插入图片和居中问题
首先到网上先下载PHPExcel 下载后解压得到这两个文件下载后引用该文件最后编写相关代码: 首先是图片插入导出 $objDrawing = new PHPExcel_Worksheet_Draw ...
win7下cmake编译opencv2.3.1生成opencv—createsamples.exe和opencv_haartrainingd.exe
第一步:下载安装cmake,之后进行默认安装即可,这步略过. 第二步:配置cmake ,使cmake找到opencv进行编译安装 watermark/2/text/aHR0cDovL2Jsb2cuY3 ...

5.2 - ToDoList

一、ToDoList需求

二、html

三、css

四、js

5.2 - ToDoList的更多相关文章

随机推荐

热门专题