基于html实现一个todolist待办事项
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<link rel="stylesheet" type="text/css" href="css/01.css">
</head>
<body>
<div class="container">
<!-- top nav start-->
<div class="nav">
<div class="topNav">
<h3>TodoList</h3>
<form id="form" action='javascript:postaction()' method='post'>
<input type="text" name="todoList" id="inputTodo" placeholder="输入内容" required="required" autocomplete="off">
</form>
</div>
</div>
<!-- top nav end -->
<!-- todo list start -->
<div class="todo">
<div class="lists">
<div class="todoNav" id="todoNav">
<span class="title1">正在进行</span>
<span class="todoCount" id="todoCount">0</span>
</div>
<div class="todoList">
<ul id="todoList">
<!-- 动态添加li -->
<!-- <li><input type="checkbox" name="" checked="checked">事项内容<span>-</span></li> -->
</ul>
</div>
</div>
</div>
<!-- todo list end -->
<!-- done list start -->
<div class="done">
<div class="lists1">
<div class="doneNav">
<span class="title2">已经完成</span>
<span class="doneCount" id="doneCount">0</span>
</div>
<div class="doneList">
<ul id="doneList">
<!-- 动态添加li -->
<!-- <li>3hsjhdjshdjhdjskas</li> -->
</ul>
</div>
</div>
</div>
<!-- done list end -->
<!-- site foot -->
<div class="siteFoot">
<div class="foot">
<p>Copyright © 2014 todolist.cn <a style="color: #8c9796;" href="javascript:clear()">clear</a></p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/01.js"></script> </html>
01.css
*{
padding:0;
margin:0;
}
body{
background: #dfe1e1;
}
ul{
list-style: none;
}
.container{}
/*top nav*/
.nav{
width: 100%;
height: 50px;
background: rgba(0,0,0,0.7);
}
.topNav{
width: 600px;
height: 26px;
color: white;
margin:auto;
/*line-height: 50px;*/
padding-top: 12px;
padding-bottom: 12px;
}
.topNav h3{
float: left;
}
.topNav input{
float: right;
width: 380px;
height: 24px;
box-shadow: 1px 1px 10px #dfe1e1 inset;
border-radius: 10px;
}
/*todo list*/
.todo{
width: 100%;
height: 100%;
}
.lists{
width: 600px;
height: 100%;
padding: 20px 0 10px 0;
margin:auto;
}
.todoNav{
width: 600px;
height: 30px;
}
.title1{
width: 300px;
height: 18px;
font-size: 18px;
font-weight: bold;
color: black;
float: left;
line-height: 18px;
/* margin-top: 20px;
margin-bottom: 10px;*/
}
.todoCount{
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
color: black;
float: right;
text-align: center;
line-height: 18px;
background: #82b5b2;
/*margin-top: 20px;
margin-bottom: 10px;*/
}
.todoList{
width: 600px;
}
.todoList ul{
width: 600px;
margin:auto;
}
.todoList li{
width: 587px;
height: 30px;
padding:0 5px;
margin:5px 0;
background: white;
line-height:30px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left:3px solid #0b423e;
}
/*done list*/
.done{
width: 100%;
height: 100%;
}
.lists1{
width: 600px;
height: 100%;
padding: 20px 0 10px 0;
margin:auto;
}
.doneNav{
width: 600px;
height: 30px;
}
.title2{
width: 300px;
height: 18px;
font-size: 18px;
font-weight: bold;
color: black;
float: left;
line-height: 18px;
/*margin-top: 20px;
margin-bottom: 10px;*/
}
.doneCount{
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
color: black;
float: right;
text-align: center;
line-height: 18px;
background: #82b5b2;
/*margin-top: 20px;
margin-bottom: 10px;*/
}
.doneList{
width: 600px;
}
.doneList ul{
width: 600px;
margin:auto;
}
.doneList li{
width: 587px;
height: 30px;
padding:0 5px;
margin:5px 0;
background: white;
line-height:30px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left:3px solid #0b423e;
}
/*site foot*/
.siteFoot{
width: 100%;
height: 100%;
}
.foot{
width: 600px;
height: 30px;
margin:auto;
text-align: center;
line-height: 30px;
}
.content{
width: 500px;
height: 27px;
color: black;
font-size: 15px;
background: white;
line-height:27px;
border: none;
}
.content:hover{
border: 1px solid skyblue;
}
.listSpan{
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
color: black;
float: right;
text-align: center;
line-height: 18px;
background: #82b5b2;
margin-top:6px;
}
.listSpan:hover{
cursor:pointer;
}
.checkBox{
width: 18px;
height: 18px;
margin-top:8px;
}
01.js
//将数据存储在浏览器localStorage
// 数据格式： todoList:[{"li":inputContent,"status":true/false}]
// 打开浏览器时，从浏览器中读取数据、显示数据
//触发post时：1、从浏览器读取数据，新增数据，将数据写回浏览器 2、在页面上新增一条内容
//修改数据：1、从浏览器读取数据，修改数据，将数据写回浏览器 页面显示
//删除数据:1、从浏览器读取数据，删除数据，将数据写回浏览器 页面显示
//todo>>>>done:读取数据，修改状态为true，写回浏览器，
//done>>>>todo：读取数据，修改状态为true，写回浏览器， 在todo里面增加一条内容 //清除所有
function clear(){
localStorage.clear();
showList();
}
//浏览器页面显示列表
function showList(){
var todoList = document.getElementById("todoList");
var doneList = document.getElementById("doneList");
var todoCount = document.getElementById("todoCount");
var doneCount = document.getElementById("doneCount");
var data = localStorage.getItem("todoList");
var todoList1 = "";
var doneList1 = "";
var count1 = 0;
var count2 = 0;
if(data!=null){
data=JSON.parse(data);
for(var i=data.length-1; i>=0; i--){
if(data[i].status){
// console.log(data[i].li);
doneList1 += "<li id='li-" + i +"'><input class='checkBox' type='checkbox' style='float:left;' checked='checked' onchange='change(" + i + ",true)'>" +
"<input class='content' type='text' style='float:left;' id='" + i + "' value=" + data[i].li + " onchange='update(" + i + ")'>" +
"<span class='listSpan' style='float:right;' onclick=remove(" +i + ")>" + "-</span></li>";
count2++; }else{
// console.log(data);
todoList1 += "<li id='li-" + i +"'><input class='checkBox' type='checkbox' style='float:left;' onchange='change(" + i + ",false)'>" +
"<input class='content' type='text' style='float:left;' id='" + i + "' value=" + data[i].li +" onchange='update(" + i + ")'>" +
"<span class='listSpan' style='float:right;' onclick=remove(" +i + ")>" + "-</span></li>";
count1++;
// todoCount= Number(todoCount.innerText); }
}
todoList.innerHTML = todoList1;
doneList.innerHTML = doneList1;
doneCount.innerText = count2;
todoCount.innerText = count1;
}else{
todoList.innerHTML = "";
doneList.innerHTML = "";
todoCount.innerText = 0;
doneCount.innerText = 0;
}
} //change todolist and donelist
function change(id,val){
var data = loadData();
if(val){
var li = document.getElementById("li-"+id);
var checkbox = li.children[0];
checkbox.innerHTML = "<input class='checkBox' type='checkbox' style='float:left;' onchange='change(" + id + ",false)'>";
var doneCount = new Number(document.getElementById("doneCount").innerText);
doneCount.innerText = doneCount-1;
data[id].status = false;
saveData(data);
showList();
}else{
var li = document.getElementById("li-"+id);
var checkbox = li.children[0];
checkbox.innerHTML = "<input class='checkBox' type='checkbox' checked='checked' style='float:left;' onchange='change(" + id + ",true)'>";
var todoCount = new Number(document.getElementById("todoCount").innerText);
todoCount.innerText = todoCount-1;
data[id].status = true;
saveData(data);
showList();
}
} //编辑
function update(id){
var data = loadData();
var newItem = document.getElementById(new String(id)); //被修改的数据
console.log(data[id]);
console.log(newItem);
data[id].li = newItem.value;
saveData(data);
} //删除
function remove(n){
var data = loadData();
data.splice(n,1);
saveData(data);
showList();
} //保存数据
function saveData(data){
data = JSON.stringify(data);
localStorage.setItem("todoList", data);
// console.log("sava",JSON.parse(localStorage.getItem("todoList")));
}
//读取数据
function loadData(){
var data = localStorage.getItem("todoList");
var emptyArray = [];
// console.log(data);
if(data==null){
// console.log(2);
return emptyArray;
}else {
// console.log(1);
return JSON.parse(data);
}
} //提交表单
function postaction(){
// localStorage.clear();
var inputTodo = document.getElementById("inputTodo");
if(inputTodo.value == "") {
alert("内容不能为空");
}else{
//读取数据
var data=loadData();
// console.log(data);
// console.log(typeof data);
var todo={"li":inputTodo.value,"status":false};
//新增
data.push(todo);
// console.log("push", data);
// 保存
saveData(data);
var form=document.getElementById("form");
form.reset();
//页面新增数据
showList();
}
}
window.onload = function(){
showList();
}
效果：
基于html实现一个todolist待办事项的更多相关文章
- js仿toDoList(待办事项）练习
JS的一个小练习 展示成果 话不多说 html骨架 <!DOCTYPE html> <html lang="en"> <head> <me ...
- todolist待办事项
使用html/css原生js实现待办事项列表: 支持添加待办事项,删除待办事项,切换待办事项的状态(正在进行,已经完成) 支持对正在进行以及已经完成事项编辑(单击内容即可编辑) 源代码:链接:http ...
- vue todolist待办事项完整
<template> <div id="app"> <input type="text" v-model='todo' @keyd ...
- Vue 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中
<template> <div id="app"> <input type="text" v-model='todo' @keyd ...
- vue2.* 事件结合双向数据绑定、模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化 06
ceshi.vue <template> <div id="app"> <input type='text' v-model='todo' @keyd ...
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中，键盘事件
<template> <div id="app"> <h1>{{ msg }}</h1> <input type=" ...
- Angular待办事项应用2
todo组件 接上一篇,在根目录创建todo组件 命令行输入:ng g c todo 得到 文件结构 修改默认路由为todo: 然后打开浏览器:http://localhost:4200/ ,查看,t ...
- jQuery模仿ToDoList实现简单的待办事项列表
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数 ...
- Go For It ，一个灵活的待办事项列表程序
导读 Go For It,是我们开源工具系列中的第十个工具,它将使你在 2019 年更高效,它在 Todo.txt 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...
随机推荐
- QT5每日一学（三） QT登陆对话框
一.使用设计模式创建界面 1.新建Qt Widgets Application,项目名称为login,类名和基类保持MainWindow和QMainWindow不变. 2.完成项目创建后,向项目中添加 ...
- 排序sort与qsort
首先看sort函数见下表: 函数名 功能描述 sort 对给定区间所有元素进行排序 stable_sort 对给定区间所有元素进行稳定排序 partial_sort 对给定区间所有元素部分排序 par ...
- 创建一个长度是5的数组,并填充随机数。使用for循环或者while循环，对这个数组实现反转效果
package day01; import java.util.Random; /** * 首先创建一个长度是5的数组,并填充随机数.使用for循环或者while循环,对这个数组实现反转效果 * @a ...
- PHP autoload实践
本文目的 本文简要的描述了PHP提供的autoload机制,以及在scake中使用实践.用于减少不必要的文件包含,提高php系统性能. 什么是__autoload php是脚本语言,不同于c++只需要 ...
- Web自动化测试框架-PO模式
Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 一.适用范围:传统Web功能自动化测试.H5功能自动化测试 ...
- 转】Mahout构建图书推荐系统
原博文出自于: http://blog.fens.me/hadoop-mahout-recommend-book/ 感谢! Mahout构建图书推荐系统 Hadoop家族系列文章,主要介绍Hadoop ...
- RabbitMQ七：交换机类型Exchange Types--Fanout 介绍
前言 最新版本的RabbitMQ有四种交换机类型,分别是Direct exchange.Fanout exchange.Topic exchange.Headers exchange. 其中之前我们用 ...
- python学习一 hello world of python
我使用的环境是 OS:Red Hat Enterprise Linux AS release 4 (Nahant Update 3) PYTHON:2.7.2 如果操作系统没有安装python, 百度 ...
- LigerUI用Post\Get\Ajax前后台交互方式的写法
parms 参数统一 json格式的数据 url 访问后台的url 设置同步参数 [javascript] view plain copy $.ajaxSetup({ async : false} ...
- 分组密码_计数器(CTR)模式_原理及java实现
一.原理: CTR模式是一种通过将逐次累加的计数器进行加密来生成密钥流的流密码,在CTR模式中,每个分组对应一个逐次累加的计数器,并通过对计数器进行加密来生成密钥流.最终的密文分组是通过将计数器加密得 ...