完成样式
本地存储的列表内容
html
<div class="todo">
<div class="todo-title">TODO</div>
<div class="todo-wrap">
//清单内容
</div>
<div class="todo-input">
<input id="input" placeholder="请输入任务详情" />
<button onclick="handleClick()">添加</button>
</div>
</div>css
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.todo {
width: 500px;
}
.todo-title {
font-size: 22px;
font-weight: bold;
}
.todo-row {
padding: 12px;
border-radius: 8px;
margin-top: 12px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: space-between;
}
.todo-row>span:nth-of-type(1) {
font-size: 16px;
font-weight: 600;
flex: 1;
}
.todo-row>span:nth-of-type(2) {
font-size: 14px;
color: #696969;
margin-right: 12px;
}
.todo-input {
margin-top: 24px;
display: flex;
align-items: center;
}
.todo-input>input {
flex: 1;
height: 36px;
border-radius: 4px;
border: 1px solid #dcdfe6;
padding: 1px 11px;
}
.todo-input>button {
width: 80px;
height: 36px;
border-radius: 4px;
margin-left: 20px;
color: #fff;
background-color: #409eff;
border: none;
cursor: pointer;
}
</style>JS撰写思路
一、获取相关元素
// 获取输入框inputEle元素 var inputEle = document.getElementById("input"); // 获取todo列表容器todoEel var todoEel = document.getElementsByClassName("todo-wrap")[0];
二、定义一个列表存储所需相关数据的集合
var todoList=[{ name:"", time:"", status:"", }]
三、获取所需数据value、time、status
1.获取输入框中输入的内容value
var value = inputEle.value; //如果未输入内容将给出提示 if (!value) { alert("请输入内容"); }2.获取添加时的本地时间time
function getNowTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var hours = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); //添加时间 return `${year}-${month}-${dates} ${hours}:${minute}:${second}`; }3.获取checkbox的状态status
通过for循环获取checkbox中的点击所获取status，通过点击复选框使当status从0变为1或者从1变为0,并且将改变存到本地。
function addEventListener() { var checkboxEle = document.getElementsByClassName("checkbox"); for (let i = 0; i < checkboxEle.length; i++) { checkboxEle[i].addEventListener('change', function() { todoList[i].status = todoList[i].status == 0 ? 1 : 0; //todoList[i].status=Number(!todoList[i].status); console.log(todoList[i].status); localStorage.setItem("todoList", JSON.stringify(todoList)); }) } }
相关知识点：
（1）onchange:
checkbox 为复选框，当元素的值发生改变时，会触发 onchange 事件。
（注：onchange 属性可以使用于： <input>, <select>, 和 <textarea>）
（2）addEventListener()
注册一个事件监听器,向指定元素添加事件句柄，当该对象触发指定的事件时，指定的回调函数就会被执行
element.addEventListener(event,function,userCapture);
event：字符串，指定事件名
function：事件触发时执行的函数
userCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
true 事件句柄在捕获阶段执行
false事件句柄在冒泡阶段执行（默认）
（3）本地存储
将数据（键值对）存到本地
localStorage.setItem("key",value);
获取存到本地的值
localStorage.getItem("key");
（注：键和值均为String类型，若把其他的类型数据存到本地需要运用 JSON.stringify() 将数据转变为String类型，同样若想取出来的数据不为String类型，需运用 JSON.parse() 将数据转型）
四、将所获的值添加进todoList列表中
todoList.push({ name: value, time: getNowTime(), //status默认为0 status: 0 });相关知识点：
往数组后面添加数据：push()
五、将todoList存储到本地，清空输入框内容
localStorage.setItem("todoList", JSON.stringify(todoList)); inputEle.value = "";
六、将所获内容按要求样式添加进页面中
//定义方法用来获取要求样式 function addTodoList(value, time, status) { return `<div class="todo-row"> <span>${value}</span> <span>${time}</span> <input id="checkbox" class="checkbox" type="checkbox" ${status === 1 ? "checked" : ""} /> </div> `; } //调用方法并渲染到页面 todoEel.innerHTML+=addToList(value,getNowTime,status);
七、绑定checkbox的onchange事件
addEventListener();
八、绑定提交按钮的onclick事件
function handleClick() { var value = inputEle.value; if (!value) { alert("请输入内容"); } todoList.push({ name: value, time: getNowTime(), status: 0 }); //存储到本地 localStorage.setItem("todoList", JSON.stringify(todoList)); inputEle.value = ""; todoEel.innerHTML += addTodoList(value, getNowTime(), status); //绑定checkbox的onchang事件 addEventListener(); }
九、初始化 todoList 列表内容为存储到本地的列表的值
var todoList = []; var result = localStorage.getItem("todoList"); //当列表为空会报错，所以要判断 todoList = result ? JSON.parse(result) : [];
十、循环将列表内容按指定样式在页面渲染
for (let i = 0; i < todoList.length; i++) { todoEel.innerHTML += addTodoList(todoList[i].name, todoList[i].time, todoList[i].status); }
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TODO List</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.todo {
width: 500px;
}
.todo-title {
font-size: 22px;
font-weight: bold;
}
.todo-row {
padding: 12px;
border-radius: 8px;
margin-top: 12px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: space-between;
}
.todo-row>span:nth-of-type(1) {
font-size: 16px;
font-weight: 600;
flex: 1;
}
.todo-row>span:nth-of-type(2) {
font-size: 14px;
color: #696969;
margin-right: 12px;
}
.todo-input {
margin-top: 24px;
display: flex;
align-items: center;
}
.todo-input>input {
flex: 1;
height: 36px;
border-radius: 4px;
border: 1px solid #dcdfe6;
padding: 1px 11px;
}
.todo-input>button {
width: 80px;
height: 36px;
border-radius: 4px;
margin-left: 20px;
color: #fff;
background-color: #409eff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="todo">
<div class="todo-title">TODO</div>
<div class="todo-wrap">
</div>
<div class="todo-input">
<input id="input" placeholder="请输入任务详情" />
<button onclick="handleClick()">添加</button>
</div>
</div>
</body>
<script>
// 获取输入框的元素
var inputEle = document.getElementById("input");
// 获取todo列表的容器
var todoEel = document.getElementsByClassName("todo-wrap")[0];
var todoList = [];
var result = localStorage.getItem("todoList");
todoList = result ? JSON.parse(result) : [];
console.log(JSON.parse(localStorage.getItem("todoList")));
console.log(todoList);
//循环将内容渲染到页面
for (let i = 0; i < todoList.length; i++) {
todoEel.innerHTML += addTodoList(todoList[i].name, todoList[i].time, todoList[i].status);
}
addEventListener();
//绑定onchange事件
function addEventListener() {
var checkboxEle = document.getElementsByClassName("checkbox");
for (let i = 0; i < checkboxEle.length; i++) {
checkboxEle[i].addEventListener('change', function() {
todoList[i].status = todoList[i].status == 0 ? 1 : 0;
//todoList[i].status=Number(!todoList[i].status);
console.log(todoList[i].status);
localStorage.setItem("todoList", JSON.stringify(todoList));
})
}
}
// 实现点击添加列表增加一行，任务名称为输入框的值，时间为当前时间
function handleClick() {
var value = inputEle.value;
if (!value) {
alert("请输入内容");
}
todoList.push({
name: value,
time: getNowTime(),
status: 0
});
//存储到本地
localStorage.setItem("todoList", JSON.stringify(todoList));
inputEle.value = "";
//添加到页面
todoEel.innerHTML +=addTodoList(value, getNowTime(), status);
//绑定checkbox的onchang事件
addEventListener();
}
// 获取当前时间，格式为yyyy-MM-dd hh:mm:ss
function getNowTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//添加时间
return `${year}-${month}-${dates} ${hours}:${minute}:${second}`;
}
function addTodoList(value, time, status) {
return `<div class="todo-row">
<span>${value}</span>
<span>${time}</span>
<input id="checkbox" class="checkbox" type="checkbox" ${status === 1 ? "checked" : ""} />
</div> `;
}
</script>
</html>
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
