todolist

程序员文章站 2022-07-01 19:10:38

...

js写的本地存储待办列表,用localstorage本地存储,写的比较随意,css公共代码没有提取,js公共功能函数也没有整合以便调用

todolist

html代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>todolist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body id="body">
	<header id="header">
		<nav>待办事项列表</nav>
	</header>
	<form id="from_block">
		<div>
			<input type="text" name="" placeholder="请写下待办事项" id="text">
		</div>
		<div>
			<input type="button" id="submit" name="" value="提交">
		</div>
	</form>
	<div id="list">
		<ul>
			<li class="list_type">
				<div>
					<span class="red">进行中</span><span id="active_num">0</span>
				</div>
				<ul id="active_list">
					
				</ul>
			</li>
			<li class="list_type">
				<div>
					<span class="green">已完成</span><span id="over_num">0</span>
				</div>
				<ul id="over_list">
				</ul>
			</li>
		</ul>
	</div>
	<div id="show_Write">
		<div id="center">
			<form>
				<ul>
					<li><textarea id="change_text"></textarea></li>
					<li><input id type="button" name="" value="确定"></li>
					<li><input type="button" name="" value="取消"></li>
				</ul>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>

css代码:

*{
	margin: 0;
	padding: 0;
}
li{
	list-style:none;
}
#header{
	padding-top: 20px;
	height: 44px;
	line-height: 44px;
	box-shadow: 1px 1px 2px grey;
	background-color: #016A5C;
}
#header nav{
	text-align: center;
	font-size: 18px;
	font-family: "微软雅黑";
	color: white;
}
#from_block{
	margin-top: 20px;
}
#from_block div{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 10px 0;
}
#from_block input{
	width: 90%;
	height: 40px;
	border: none;
	outline: none;
}
.red{
	color:#007BB6;
}
.green{
	color: #4BC98C
}
#from_block div:nth-child(1) input{
	border:1px #4791FF solid;
	border-radius:3px;
	padding-left: 5px;
	font-size: 18px;
}
#from_block div:nth-child(1) input:focus{
	box-shadow: 0.5px 1px 3px grey;
}
#from_block div:nth-child(2) input{
	background: #4791FF ;
	border-radius:3px;
	color: white;
	box-shadow: 0.5px 1px 3px grey;
	font-size: 20px;
}
#from_block div:nth-child(2) input:active{
	box-shadow: none;
}
#list{
	margin-top: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
	padding-bottom: 8px;
}
#list>ul{
	width: 90%;
}
#list .list_type{
	line-height: 40px;
}
.list_type:nth-child(2){
	clear: both;
}
#list .list_type div{
	height: 50px;
	line-height: 50px;
	width: 100%;
	box-shadow: 0px 0.5px 5px gray;
	font-size: 18px;
	color: #808080;
	font-family: "Microsoft Yahei";
	margin-top: 3px;
}
#list .list_type:nth-child(1){
	border-left: 5px #007BB6 solid;
}
#list .list_type:nth-child(2){
	border-left: 5px #4BC98C solid;
}
.list_type span:nth-child(1){
	float: left;
	margin-left: 15px;
}
.list_type span:nth-child(2){
	float: right;
	width: 60px;
	text-align: center;
	background-color: #016A5C;
	color: white;
}
#list .list_type ul{
	width: 98%;
	clear: both;
	float :right;
	margin-right: 5px;
	display: none;
}
#list .list_type li{
	height: 40px;
	line-height: 40px;
	width: 100%;
	background-color: #FAFAFA;
	margin-top: 3px;
	font-size: 15px;
	color: #808080;
	display: flex;
}
.list_type li a{
	text-align: center;
	margin: 0 10px 0 5px;
	width: 10%;
}
.list_type li a:nth-child(1){
	margin: 0 5px 0 10px;
}
.list_type img{
	width: 30px;
	height: 30px;
	margin-top: 5px;
}
.list_type p{
	display: inline-block;
	height: 100%;
	overflow: auto;
	width: 70%;
}

#active_list{
	margin-bottom: 3px;
}
#active_list li{
	border-left: 3px #EB4D4E solid;
}
#over_list li{
	border-left: 3px #016A5C solid;
}
#show_Write{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color:rgba(188,188,188,0.5);
	display: none;
}
#center{
	position: absolute;
	width: 300px;
	top: 30%;
	left: 50%;
	margin-left: -150px;
	background-color: white;
	z-index: 1000;
	box-shadow: 1px 1px 5px gray;
	border-radius: 3px;
	padding-bottom: 10px;
}
textarea{
	width: 270px;
	line-height: 20px;
	height: 90px;
	font-size: 16px;
	margin:10px;
	padding: 3px;
	outline: none;
	border-radius: 3px;
	resize:none
}
#center li:nth-child(2){
	float: left;
}
#center li:nth-child(3){
	float: right;
}
#center li:nth-child(2),#center li:nth-child(3){
	width: 50%;
	text-align: center;
}

#center input{
	border:none;
	outline:none;
	padding: 8px 20px;
	background-color: #4791FF;
	box-shadow: 0.5px 1px 3px grey;
	color: white;
	border-radius: 2px;
}
#center input:active{
	box-shadow: none;
}

js代码:

window.onload=function(){
	var submit=document.getElementById("submit");
	var text=document.getElementById("text");
	var active_list=document.getElementById("active_list");
	var over_list=document.getElementById("over_list");
	var active_num=document.getElementById("active_num");
	var over_num=document.getElementById("over_num");
	var show_write=document.getElementById("show_Write");
	var change_text=document.getElementById("change_text");
	var list_type=document.getElementsByClassName("list_type");
	var activeData=getData("active");
	if(!activeData){
		activeData=[];
	}
	var overData=getData("over");
	if(!overData){
		overData=[];
	}
	showList(activeData,active_list,"icon/win1.png",active_num);
	showList(overData,over_list,"icon/win2.png",over_num);
//提交保存输入输入框文本
	submit.onclick=function(){
		if(text.value==""){
			alert("请输入内容,然后提交!");
		}else{
			activeData.push(text.value);
			saveData("active",activeData)
			showList(activeData,active_list,"icon/win1.png",active_num);
			text.value="";
		}
	}
	function showList(dataList,id,url,shownum){
		id.innerHTML="";
		if(dataList.length>=0){
			for(var i=0;i<dataList.length;i++){
				var list=document.createElement("li");
				list.className="active_li";
				id.appendChild(list);
				list.appendChild(creatElementa(url));
				var text=document.createElement("p");
				text.innerText=dataList[i];
				list.appendChild(text);
				if(url=="icon/win1.png"){
					list.appendChild(creatElementa("icon/write.png"));
				}
				list.appendChild(creatElementa("icon/remove.png"));
			}
			shownum.innerText=dataList.length;
		}
	}
//添加a标签
	function creatElementa(url){
		var aox=document.createElement("a");
		var img=document.createElement("img");
		img.src=url;
		aox.appendChild(img);
		return aox;
	}
	//添加手风琴列表效果
	for(var i=0;i<list_type.length;i++){
		list_type[i].setAttribute("index",i);
		list_type[i].getElementsByTagName("div")[0].onclick=function(e){
			for(var j=0;j<list_type.length;j++){
				if(this==list_type[j].getElementsByTagName("div")[0]){
					var everyUl=list_type[j].getElementsByTagName("ul");
					if(everyUl[0].style.display=="block"){
						everyUl[0].style.display="none";
					}else{
						everyUl[0].style.display="block";
					}
				}else{
					list_type[j].getElementsByTagName("ul")[0].style.display="none";
				}
			}
			var index=this.parentNode.getAttribute("index");
			if(index==0){
				list_type[index].onmouseover=function(){
					updata();
					write();
					remove(activeData,"active");
				}
			}else if(index==1){
				list_type[index].onmouseover=function(){
					remove(overData,"over");
				}
			}
		}
	}
//删除当前行的文本
	function remove(data,type){
		var active_lis=document.getElementsByClassName("active_li");
		for(var i=0;i<active_lis.length;i++){
			active_lis[i].setAttribute("index",i);
			var num=1;
			if(type=="active"){
				num=2;
			}else{
				num=1;
			}
			active_lis[i].getElementsByTagName("a")[num].onclick=function(){
				var index=this.parentNode.getAttribute("index");
				data.splice(index,1);
				saveData(type,data)
				if(type=="active"){
					showList(activeData,active_list,"icon/win1.png",active_num);
				}else if(type=="over"){
					showList(overData,over_list,"icon/win2.png",over_num);
				}
			}
		}
	}
//修改文本
	function write(){
		var active_lis=document.getElementsByClassName("active_li");
			for(var i=0;i<active_lis.length;i++){
				active_lis[i].setAttribute("index",i);
				active_lis[i].getElementsByTagName("a")[1].onclick=function(){
					show_write.style.display="block";
					var index=this.parentNode.getAttribute("index");
					change_text.value=activeData[index];
					console.log(show_write.getElementsByTagName("input")[0])
					show_write.getElementsByTagName("input")[0].onclick=function(){
						activeData[index]=change_text.value;
						saveData("active",activeData);
						show_write.style.display="none";
						showList(activeData,active_list,"icon/win1.png",active_num);
					}
					show_write.getElementsByTagName("input")[1].onclick=function(){
						show_write.style.display="none";
					}

				}
			}
	}
//改变文本的状态(未完成到已完成);
	function updata(){
		var active_lis=document.getElementsByClassName("active_li");
		for(var i=0;i<active_lis.length;i++){
			active_lis[i].setAttribute("index",i);
			active_lis[i].getElementsByTagName("a")[0].onclick=function(){
				var index=this.parentNode.getAttribute("index");

				overData.push(activeData[index]);
				activeData.splice(index,1);
				saveData("active",activeData);
				saveData("over",overData);
				showList(activeData,active_list,"icon/win1.png",active_num);
				showList(overData,over_list,"icon/win2.png",over_num);
				
			}
		}
	}
//数据保存到本地
	function saveData(type,data){
		window.localStorage.setItem(type,JSON.stringify(data));
	}
//获取本地数据
	function getData(type){
		return JSON.parse(localStorage.getItem(type));
	}

}

todolist

.NET 6开发TodoList应用之实现PUT请求

.NET 6开发TodoList应用之使用AutoMapper实现GET请求

Vuejs 实现简易 todoList 功能与组件实例代码

webpack4手动搭建Vue开发环境实现todoList项目的方法

基于vuejs实现一个todolist项目

vue实现todolist单页面应用

Vuejs 实现简易 todoList 功能与组件实例代码

Vue中父子组件通讯之todolist组件功能开发

Vue.js实现简单ToDoList 前期准备（一）

利用vue写todolist单页应用

todolist

.NET 6开发TodoList应用之实现PUT请求

.NET 6开发TodoList应用之使用AutoMapper实现GET请求

Vuejs 实现简易 todoList 功能 与 组件实例代码

webpack4手动搭建Vue开发环境实现todoList项目的方法

基于vuejs实现一个todolist项目

vue实现todolist单页面应用

Vuejs 实现简易 todoList 功能 与 组件实例代码

Vue中父子组件通讯之todolist组件功能开发

Vue.js实现简单ToDoList 前期准备（一）

利用vue写todolist单页应用

Vuejs 实现简易 todoList 功能与组件实例代码

Vuejs 实现简易 todoList 功能与组件实例代码