基于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 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...
随机推荐
- Vue父子组件传值之——访问根组件$root、$parent、$children和$refs
Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...
- Logstash同步mysql数据库信息到ES
@font-face{ font-family:"Times New Roman"; } @font-face{ font-family:"宋体"; } @fo ...
- docker数据存储
docker数据存储 docker提供了三种类型的数据存储 第一种:将数据直接存储在容器中 第二种:将数据映射到外部的本机目录 第三种:将数据映射到专门的数据卷容器
- [POI2011]Temperature
Description The Byteotian Institute of Meteorology (BIM) measures the air temperature daily. The mea ...
- 题解报告：hdu 1284 钱币兑换问题（简单数学orDP）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1284 Problem Description 在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很 ...
- OAuth2.0认证流程是如何实现的？
导读 大家也许都有过这样的体验,我们登录一些不是特别常用的软件或网站的时候可以使用QQ.微信或者微博等账号进行授权登陆.例如我们登陆豆瓣网的时候,如果不想单独注册豆瓣网账号的话,就可以选择用微博或者微 ...
- SQL常用自定义函数
1.字符串转Table(Func_SplitToTable) CREATE FUNCTION [dbo].[Func_SplitToTable] ( @SplitString ...
- 学习笔记 第七章 使用CSS美化超链接
第7章 使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1 定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...
- CCF|最小差值|Java
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = ...
- Bash Template
#/bin/bash #set -x set -e usage() { cat <<EOF Usage: `basename $` [OPTIONS] <non-option arg ...