需求
首先明确需要实现的功能
- 输入内容，点击添加按钮或回车，添加待办事项
- 点击删除按钮可以删除
- 内容保存到本地，刷新重启后list还在
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
list-style: none;
box-sizing: border-box;
}
body{
background-color: #F48C78;
overflow-x: hidden;
transform: scale(1.2);
}
#container{
width: 300px;
margin: 80px auto 0 auto;
padding: 10px;
min-height: 450px;
background-color: #2F3D4A;
box-shadow: 0px 3px 10px #8F5246,3px 0px 10px #8F5246;
border-radius: 10px;
}
#container h1{
color: #FCFFFF;
width: 85px;
margin: 30px auto;
}
#input {
font-size: 0;
position: relative;
}
#input input{
width: 80%;
height: 30px;
margin-left: 9%;
border-radius: 15px;
padding: 5px 10px;
}
#input input::-webkit-input-placeholder{
/* chrome safari*/
color: #AFB2B9;
text-align: center;
}
#input input::-moz-placeholder{
/* 火狐获取placeholder*/
color: #AFB2B9;
text-align: center;
}
#input button{
width: 45px;
height: 30px;
border-radius: 0 15px 15px 0;
background-color: #F48C78;
position: absolute;
right: 30px;
cursor: pointer;
opacity: 0;
transition: all 0.5s 0.1s;
visibility: hidden;
color: #fff;
}
#input input:focus + button, #input button:hover{
opacity: 1;
visibility: visible;
}
#input button:hover{
background-color: #CD4F35;
}
ul{
margin: 30px 0;
}
ul li{
width: 224px;
margin: 10px 0 0 9%;
color: #FCFFFF;
background-color: #283140;
font-weight: 600;
padding: 5px 10px;
border-radius: 10px;
}
ul li:hover{
background-color: #455878;
transition: all 0.4s ;
}
.removebtnContainer{
margin: 4px 5px 0 0;
float: right;
border-radius: 50%;
width: 13px;
height: 13px;
border: solid #FD8263;
position: relative;
top: 50%;
transition: all 0.2s ;
cursor: pointer;
}
.removebtnContainer:hover{
background-color: #FD8263;
}
</style>
</head>
<body>
<!-- html部分属实简单 -->
<div id="container">
<h1>Todos</h1>
<div id="input">
<input type="text" id="content" placeholder="别玩了懒狗" onfocus="this.placeholder = ''" onblur="this.placeholder = '别玩了懒狗'">
<!-- placeholder 内容自己改 -->
<button>add</button>
</div>
<ul id="ul"></ul>
</div>
<script>
let todoList = document.getElementsByTagName('ul')[0];
let inputElement = document.getElementById('content');
let buttonElement = document.getElementsByTagName('button')[0];
let todos = JSON.parse(localStorage.getItem('todos')) || []; // todos数组保存待办项
function addNew(content){
let item = document.createElement('li');
item.innerText = content;
addNewButton(item);
todoList.appendChild(item);
todos.push(content);
save();
}
function addNewButton(item){
let container = document.createElement('div');
container.className = 'removebtnContainer';
item.appendChild(container);
}
function save(){
localStorage.setItem('todos',JSON.stringify(todos)); // 将数组转为字符串并储存在本地
}
function reLoad(){
todos.forEach((content) => {
let item = document.createElement('li');
item.innerText = content;
addNewButton(item);
todoList.appendChild(item);
});
}
function reMove(item){
item.parentNode.remove();
todos.forEach((content, index) => {
if(item.parentNode.innerText.trim() == content){
todos.splice(index, 1); // splice方法 删除index开始的 1项
}
})
save();
}
/* ↑ 函数声明
-------------------------------------------------------------------------
事件、执行 ↓ */
reLoad(); //从本地载入
/*两种方式添加待办项*/
//鼠标点击添加
buttonElement.addEventListener('click', () =>{
if(inputElement.value){
addNew(inputElement.value.trim());
inputElement.value = '';
}
},false)
//键盘回车添加
inputElement.addEventListener('keyup', (event) =>{
console.log(event);
if(event.keyCode == 13 && inputElement.value){
//回车 keyCode === 13
addNew(inputElement.value.trim());
inputElement.value = '';
}
})
//点击删除
todoList.addEventListener('click',(event)=>{
if(event.target.className == 'removebtnContainer'){
reMove(event.target);
}
},false)
</script>
</body>
</html>
js部分并不长，逻辑也比较清晰
css最难
部分解释
本地储存
localStorage教程
用localStorage储存在本地，每次开启页面时再读取
因为localStorage是以字符串形式存储数据的，所以借助JSON将数组转为字符串格式
localStorage.setItem('todos',JSON.stringify(todos));
添加
addEventListener给后面的 处理函数 传入事件对象
inputElement.addEventListener('keyup', (event) =>{
//此处event为addEventListener传入
console.log(event);
if(event.keyCode == 13 && inputElement.value){
//回车 keyCode === 13
addNew(inputElement.value.trim());
inputElement.value = '';
}
})
数组方法
forEach、splice 见 数组方法
bug
目前删除有个bug，相同内容 的元素会一起删除
按内容检索的弊端如此
还没有想到太好的解决办法