#学习笔记#(36)JS初步实现todolist添加任务功能

html文件代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Personal Manager</title>
		<link href="PMstyle.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="tasks-box" id="tasksbox">
			
			<div class="task">
				<input type="text" id="taskcontent" placeholder="请在这里输入任务内容" />
				<button id="addbtn" οnclick="addtask()">添加</button>
			</div>
			
			<h3>任务列表</h3>
			<div id="list"></div>

		</div>
		<script src="PM.js"></script>
	</body>
</html>

js代码如下

			//localStorage.tasks=""; //清楚列表
			if(localStorage.tasks!="")
				document.getElementById("list").innerHTML=localStorage.tasks;
			
			function addtask(){
				var taskcontent=document.getElementById("taskcontent").value;
				var taskbox=document.createElement("div");
				taskbox.className="task";
				document.getElementById("list").appendChild(taskbox);
				var inputtext=document.createElement("label");
				inputtext.innerHTML=taskcontent;
				taskbox.appendChild(inputtext);
				
				var inputcheckbox=document.createElement("input");
				inputcheckbox.type="checkbox";
				taskbox.appendChild(inputcheckbox);
				
				//将添加的任务存储到localStorage
				if (window.localStorage) {
				    localStorage.setItem("tasks",document.getElementById("list").innerHTML);
					} else {
    				Cookie.write("tasks", document.getElementById("list").innerHTML);	
					}
			}

css如下

.tasks-box{
	width:400px;
	height:auto;
	margin:40px auto;
}
.task{
	margin:10px;
}
.task input[type="text"]
{
	width:300px;
	border:none;
	border-color:#ccc;
	border-width:1px;
	border-bottom-style:dashed;
}
.task input[type="checkbox"]{
	margin-left:10px;
}
.task label{
	font-size:14px;
	font-family:微软雅黑;
}
h3{
	color:#1E90FF;
}

效果如图：