使用html+css+jQuery做一个每日任务列表

st紫月

已于 2022-03-29 13:04:33 修改

阅读量703

点赞数 1

分类专栏： JavaScript 文章标签： jquery css html5

于 2021-10-19 16:49:50 首次发布

本文链接：https://blog.csdn.net/ziyue13/article/details/120849677

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

这是一个基于HTML、CSS和JavaScript实现的每日任务管理应用。用户可以添加任务，并将其分为正在进行和已经完成两类。任务列表会根据用户的操作动态更新，并通过本地存储持久化数据。应用还具备任务删除和状态切换功能，提供了简洁的视觉反馈。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>每日任务列表</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			background-color: aqua;
		}
		.div1{
			width: 100%;
			height: 50px;
			 background-image: linear-gradient(125deg,deepskyblue,purple);
		}
		.div1 .dov1{
			width: 500px;
			margin: auto;
		}
		.div1 .dov1 span{
			font-size: 30px;
		}
		.div1 input{
			margin-left: 50px;
			width: 200px;
			height: 30px;
			color: #C0C0C0;
			outline: none;
			
		}
		.div2{
			margin:40px auto;
			width: 500px;
			border: 1px solid transprant;
			position: relative;
			color: black;
			font-size: 30px;
		}
		.div2 .div3{
			width: 30px;
			height: 30px;
			background-color: plum;
			border-radius: 50%;
			position: absolute;
			top: 10px;
			right: 0px;
			font-size: 18px;
			line-height: 30px;
			text-align: center;
		}
		.div2 .div4{
			width: 30px;
			height: 30px;
			background-color: plum;
			border-radius: 50%;
			position: absolute;
			top: 10px;
			right: 0px;
			font-size: 18px;
			line-height: 30px;
			text-align: center;
		}
		
		button{
			cursor: pointer;
			width: 50px;
			background-color: black;
			color: green;
		}
		a{
			float: right;
		}
		li{
			list-style: none;
			background-color: white;
			margin-top: 10px;
			padding-left: 20px;
			padding-right: 20px;
		}
		p{
			display: inline-block;
		}
		ul input{
			width: 20px;
			height: 20px;
		}
		ol input{
			width: 20px;
			height: 20px;
		}
		ol li{
			background-color: #C0C0C0;
			color: gray;
		}
	</style>
	<script src="jQuery.js"></script>
</head>
<body>
	<div class="div1">
		<div class="dov1">
		<span>任务列表:</span>
		<input type="text" value="添加任务">
		<button>添加</button>
		</div>
		
	</div>
	<div class="div2">
		正在进行:
		<ul class="todolist"></ul>
	<div class="div3">0</div>
	</div>
	<div class="div2">
		已经完成：
		<ol class="donelist"></ol>
	<div class="div4">0</div>
	</div>
	
	<script>
		//本地存储里面只能存储字符串的数据格式，可以通过JSON.stringify()转化为字符串的形式
		//取出本地存储中储存的数据必须要转化为对应的数据格式，转化为数组对象用JSON.parse()
		
		load();
		$("button").on("click",function(){
			//先读取本地存储原来的数据
			var local=getData();
			//把local数组进行更新数据，把最新的数据追加给local数组
			local.push({"title":$("input").val() , "done":false});
			//把数组local存储到本地存储
			saveData(local);
			load();
		})
		//当鼠标焦点在文本框时清空内容
		$("input").on("focus",function(){
			$(this).val("");
		})
		//给委派给ul当中的每个a绑定点击事件
		$("ul,ol").on("click","a",function(){
			var data=getData();
			var index=$(this).attr("id");
			data.splice(index,1);
			saveData(data);
			load();
		})
		
		$("ol, ul").on("click","input",function(){
			//先获取数据
			var data=getData();
			//修改数据,点击复选框修改done的值
			var index=$(this).siblings('a').attr("id");
			data[index].done=$(this).prop("checked");
			console.log(index);
			saveData(data);
			load();
		})
		
		
		function getData(){
			var data=localStorage.getItem("todolist");
			if(data!==null){
				//本地存储里面的数据是字符串格式的，我们需要转化为对象格式
				return JSON.parse(data);
			}else{
				return [];
			}
		}
		
		function saveData(data){
			localStorage.setItem("todolist",JSON.stringify(data));
		}
		
		function load(){
			//读取本地存储的数据
			var data=getData();
			//先清空ol当中的数据
			$("ul").empty();
			$("ol").empty();
			//遍历这个数据
			var todocount=0;
			var donecount=0;
			$.each(data,function(i,n){
				if(n.done){
					$("ol").prepend("<li><input type='checkbox' checked='checked' > <p>"+n.title+"</p> <a href='javascript:;' id="+i+">删除</a></li>");
					donecount++;
				}else{
					$("ul").prepend("<li><input type='checkbox' > <p>"+n.title+"</p> <a href='javascript:;' id="+i+">删除</a></li>");
					todocount++;
				}
				
				//这个地方如果用单引号代表字符串，双引号代表拼接
			})
			$(".div3").text(todocount);
			$(".div4").text(donecount);
		}
		
		
	</script>
</body>
</html>

st紫月

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用html+css+jQuery做一个每日任务列表

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>每日任务列表</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: aqua; } .div1{ width.
复制链接

扫一扫

专栏目录