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 帮你把要做的事情列出来,一项一项,类似思维导图. ...
随机推荐
- pip install read time-out
Problem ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out. 1 S ...
- EXTI—外部中断/事件控制器
外部中断/事件控制器(EXTI)管理了控制器的 23 个中断/事件线.每个中断/事件线都对应有一个边沿检测器,可以实现输入信号的上升沿检测和下降沿的检测. EXTI 可以实现对每个中断/事件线进行单独 ...
- 《TCP/IP图解》读书笔记
看这本书的目的: 了解计算机之间是怎么通信的 熟悉TCP/IP协议 后面就这两个目的进行展开,要达到这两个目的,读这本书,学到了哪些知识. 一.计算机之间是怎么通信的 先来了解下面几个概念,中继器,二 ...
- lua错误收集
这里放一些我遇到的lua错误,希望大家分享一些错误给我,统一放在这里. 1.lua表的引用传值 上面的代码运行后会发现t2[2],t2[3]表里的内容也被删除了,实际上它们 与t2[1]表里的内容都是 ...
- I2C和SPI
I2C(Inter-Integrated Circuit)总线 两线式串行总线,用于连接微控制器及其外围设备.是微电子通信控制领域广泛采用的一种总线标准.它是同步通信的一种特殊形式,具有接口线少,控制 ...
- 扩展-Easyui Datagrid相同连续列合并扩展（一）
一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){ $(this).datagrid("autoMerge ...
- 利用CSS生成精美细线Table表格
精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...
- Softmax vs. Softmax-Loss VS cross-entropy损失函数 Numerical Stability(转载)
http://freemind.pluskid.org/machine-learning/softmax-vs-softmax-loss-numerical-stability/ 卷积神经网络系列之s ...
- ubuntu vnc安装
VNC(Virtual Network Computing),为一种使用RFB协议的屏幕画面分享及远程操作软件.此软件借由网络,可发送键盘与鼠标的动作及即时的屏幕画面. 1. 安装vnc服务器 sud ...
- ArrayList具有数组的查询速度快的优点以及增删速度慢的缺点
LinkedList接口(在代码的使用过程中和ArrayList没有什么区别) ArrayList底层是object数组,所以ArrayList具有数组的查询速度快的优点以及增删速度慢的缺点. 而在L ...