小型记事本

最新推荐文章于 2024-06-03 15:13:17 发布

原创最新推荐文章于 2024-06-03 15:13:17 发布 · 119 阅读

CC 4.0 BY-SA版权

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <link rel="stylesheet" type="text/css" href="css/style1.css"/>
    <meta name="viewport" content="width=375,user-scalable=no" />
</head>
<body>
<div class="header">
    <div class="logo">TodoList</div>
    <div class="input">
        <input type="text" name="write" id="write" placeholder="" value="" />
    </div>
</div>
<div class="main">
    <div class="list todo">
        <h1>
            <span class="title">正在进行</span>
            <span class="num">0</span>
        </h1>
        <div class="clist">
            <div class="item">
						<span class="checkbox">
							<input type="checkbox" name="check"  value="" />
						</span>
                        <span class="content">
							唱跳RAP篮球
						</span>
                         <span class="delete">

                         </span>
            </div>
        </div>
    </div>
    <div class="list done">
        <h1>
            <span class="title">已经完成</span>
            <span class="num">0</span>
        </h1>
        <div class="clist"></div>
    </div>
</div>

<script src="js/todo1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
	/*定义盒子模型，设置元素的宽度高度不会因为设置padding/border改变*/
	box-sizing: border-box;
}

body{
	background: #efefef;
}
.header{
	width: 375px;
	height: 50px;
	background: rgba(47,47,47,0.98);
	display: flex;
	
}
.header .logo{
	color: #fff;
	width: 100px;
	text-align: center;
	line-height: 50px;
	font-size: 19px;
}
.header .input{
	color: #fff;
	width:275px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.header .input input{
	border: none;
	outline: none;
	width: 250px;
	height: 30px;
	border-radius: 5px;
	padding: 0 20px;
}


.list>h1{
	margin: 20px;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
}


.done>h1 .num{
	width: auto;
	padding: 0 10px;
	height: 25px;
	border-radius:20px;
	background: greenyellow;
	color: #fff;
	font-size: 15px;
	text-align: center;
	line-height: 25px;
}
.todo>h1 .num{
	width: auto;
	padding: 0 10px;
	height: 25px;
	border-radius:20px;
	background: deeppink;
	color: #fff;
	font-size: 15px;
	text-align: center;
	line-height: 25px;
}


.item{
	margin: 5px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border-radius: 5px;
	padding: 5px 15px;
	position: relative;
}
.item:before{
	content: "";
	width: 8px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: greenyellow;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}
.item .checkbox{
	display: flex;
	align-items: center;
}
.item .checkbox input{
	width: 22px;
	height: 22px;
	outline: none;
}
.item .content{
	width:260px ;
	padding: 0 10px;
	line-height: 22px;
}

.item .delete{
	width: 22px;
	height: 22px;
	background-image: url(../img/delete.png);
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;

}

.main{
	width: 375px;
}

var inputDom = document.querySelector("#write");
var todoList = document.querySelector(".todo .clist")
var doneList = document.querySelector(".done .clist")
var todoNumSpan = document.querySelector('.todo h1 .num');
var doneNumSpan = document.querySelector('.done h1 .num');
var main = document.querySelector(".main")

//JSON.parse->将JSON格式的字符串转换成数组对象；
var dataList = localStorage.dataList?JSON.parse(localStorage.dataList):[];
renderList()

inputDom.onkeypress = function(e){
	//console.log(e)
	//当用户在输入框按下回车键，并且输入框有内容，那么就将输入框的内容放置到待办事项里
	if(e.key=="Enter"&&inputDom.value!=""){
		//往dataList数据里添加待办事项数据
		var data = {
			content:inputDom.value,
			type:"todo"
		}
		dataList.push(data)
		//根据数据渲染列表
		renderList()
	}
}


function renderList(){
	//每次渲染，将之前的内容清空，重新渲染
	//JSON.stringify:将对象转换成JSON格式字符串；
	localStorage.dataList = JSON.stringify(dataList)
	todoList.innerHTML = "";
	doneList.innerHTML = "";
	var todoNum = 0;
	var doneNum = 0;
	dataList.forEach(function(item,index){
		var newDiv = document.createElement("div")
		newDiv.className = "item";
		if(item.type=="todo"){
			todoNum++;
			newDiv.innerHTML = `
				<span class="checkbox">
					<input type="checkbox" name="check"  value="" data-index="${index}"  />
				</span>
				<span class="content">
					${item.content}
				</span>
				<span class="delete" data-index="${index}"></span>
			`;
			todoList.appendChild(newDiv)
		}else{
			doneNum ++;
			newDiv.innerHTML = `
				<span class="checkbox">
					<input type="checkbox" name="check" checked="checked"  value="" />
				</span>
				<span class="content">
					${item.content}
				</span>
				<span class="delete" data-index="${index}"></span>
			`;
			doneList.appendChild(newDiv)
		}
	})
	console.log(todoNum)
	todoNumSpan.innerHTML = todoNum;
	doneNumSpan.innerHTML = doneNum;
}



todoList.onchange = function(e){
	//console.log(e)
	var index = e.target.dataset.index;
	console.log(index)
	dataList[index].type = "done";
	renderList()
	
}

//删除事项
main.addEventListener("click",function(e){
	if(e.target.className=="delete"){
		var index = e.target.dataset.index;
		//console.log(e)
		dataList.splice(index,1);
		renderList();
	}
	
})