静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="app">
<div class="box">
<h1>待办列表</h1>
<div class="tool">
<input autofocus="" class="userTask" type="text" placeholder="请输入代办事项" />
</div>
<ul>
</ul>
<section>
<span>0 未完成</span><a href="javascript:;">清理 <b>0</b> 已完成</a>
</section>
</div>
</div>
<script src=" ./js/index.js "></script>
</body>
</html>
样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
}
ul {
list-style: none;
}
li {
padding: 20px;
text-align: left;
font-size: 30px;
border-bottom: 1px dashed #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
li input {
margin-right: 10px;
}
li button {
display: none;
padding: 5px;
}
li:hover button {
display: inline-block;
cursor: pointer;
}
.finished {
text-decoration: line-through;
}
h1 {
margin-bottom: 10px;
}
.box {
background-color: #fff;
width: 60vw;
padding: 20px 20px 0;
margin: 50px auto;
}
.box .tool input {
width: 100%;
height: 50px;
text-indent: 20px;
font-size: 20px;
font-style: italic;
color: #666;
font-weight: 700;
}
section {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration-color: #666;
color: inherit;
}
js
window.addEventListener('load', function() {
// 模拟数据
let arr = JSON.parse(localStorage.getItem('unfinished')) || []
// 获取元素
let ul = document.querySelector('.box ul') //获取ul元素
let userTask = document.querySelector('.userTask') //获取任务文本
let countText = document.querySelector('section span') //获取未完成数
let numText = document.querySelector('section b') //获取已完成数
let clear = document.querySelector('section a') //获取清除已完成按钮
function init() {
// 声明空字符串
let htmlStr = ''
// 数据遍历
arr.forEach(function(v, i) {
htmlStr += `<li class="${v.class}" id="${v.id}">
<div>
<input class="ck" type="checkbox" ${v.state ? 'checked' : ''} data-id="${v.id}" /><span class="false">${v.task}</span>
</div>
<button class="del" data-id="${v.id}">X</button>
</li>`
})
ul.innerHTML = htmlStr
}
// 渲染页面
init()
// 渲染页面
finished()
// 键盘事件绑
userTask.addEventListener('keyup', function(e) {
// 判断enter键
if (e.which == 13) {
// 声明对象
let obj = {
id: arr.length > 0 ? arr[arr.length - 1].id + 1 : 1,
task: userTask.value,
state: false
}
// 把数据添加进数组
arr.push(obj)
// 任务输入框清零
userTask.value = ''
// 渲染页面
init()
// 渲染下面数量
finished()
// 本地存储
save()
}
})
// 事件委托
ul.addEventListener('click', function(e) {
// 获取id
let id = e.target.dataset.id
// 复选框
if (e.target.className == 'ck') {
// 数据遍历
for (let i = 0; i < arr.length; i++) {
// 判断id
if (id == arr[i].id) {
arr[i].state = !arr[i].state
// 判断添加删除线
if (arr[i].state) {
arr[i].class = 'finished'
} else {
arr[i].class = ''
}
}
}
// 渲染页面
init()
// 渲染下面数量
finished()
// 本地存储
save()
}
// 删除事件
else if (e.target.className == 'del') {
arr = arr.filter(function(v) {
return id != v.id
})
// 页面渲染
init()
// 渲染下面数量
finished()
// 本地存储
save()
}
})
clear.addEventListener('click', function() {
// 清楚已完成
arr = arr.filter(function(v) {
return !v.state
})
// 渲染页面
init()
// 渲染下面数量
finished()
// 本地存储
save()
})
// 本地存储函数
function save() {
localStorage.setItem('unfinished', JSON.stringify(arr))
}
// 下面数量显示函数
function finished() {
//声明变量count
let count = 0
//遍历数据
arr.forEach(function(v, i) {
if (v.state) {
count++
}
})
countText.innerText = `${arr.length - count} 未完成`
numText.innerText = `${count}`
}
})
\
