本文将一步一步介绍如何实现下面这样的一个任务管理工具

完整代码已上传至码上掘金:jcode

作者正在参加码上掘金编程赛,辛苦各位读者大大给我的码上掘金作品点个赞👍吧

基本结构

首先我们建立 HTML 的基本结构,定义 HTML 文档的类型、语言、头部信息以及页面内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
<style media="screen">
/* CSS 样式 */
</style>
<script>
/* JavaScript 脚本 */
</script>
</head>
<body>
<!-- HTML 页面内容 -->
</body>
</html>

HTML

下面这是页面的主要内容,比较简单。包含了一个容器,其中包含一个输入框和一个按钮用于添加任务,并且还有一个空的任务列表,用于在添加任务时显示任务。

1
2
3
4
5
6
7
8
<div class="container">
<div id="newtask">
<input type="text" placeholder="要完成的任务..">
<button id="push">添加</button>
</div>

<div id="tasks"></div>
</div>

CSS

重置页面所有元素的内外边距和盒模型大小,并将元素的盒模型设为"border-box",使得元素的大小不会随着内边距和边框的增加而变化。

1
2
3
4
5
6
7
    	*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}

设置整个页面的背景图像,高度为视口高度"100vh"

1
2
3
4
5
6
7
body{
background: url("https://haiyong.site/img/img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png" );
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}

.container是整个应用的最外层容器,它被定位在屏幕的中心,并且具有一个白色的背景和10像素的圆角边框。它的宽度为40%,但是最小宽度为450像素。

1
2
3
4
5
6
7
8
9
10
.container{
width: 40%;
min-width: 450px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
background: white;
border-radius: 10px;
}

#newtask是一个表单容器,其中包含一个输入框和一个提交按钮。输入框的样式包括宽度、高度、字体、边框、内边距、字体颜色和字体粗细。当输入框被聚焦时,边框颜色会改变。提交按钮的样式包括宽度、高度、字体、字体颜色、背景颜色、边框、圆角和光标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#newtask{
position: relative;
padding: 30px 20px;
}
#newtask input{
width: 75%;
height: 45px;
font-family: 'Poppins',sans-serif;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#newtask input:focus{
outline: none;
border-color: #0d75ec;
}

#newtask button{
position: relative;
float: right;
width: 20%;
height: 45px;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #0d75ec;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
}

#tasks是待办事项列表的样式,用于设置其背景颜色、内边距、顶部外边距、边框半径、宽度和相对定位。

1
2
3
4
5
6
7
8
#tasks{
background-color: #ffffff;
padding: 30px 20px;
margin-top: 10px;
border-radius: 10px;
width: 100%;
position: relative;
}

.task是每个待办事项的样式,用于设置其背景颜色、高度、下外边距、内边距、显示属性、对齐方式、边框半径、边框样式和光标类型。

1
2
3
4
5
6
7
8
9
10
11
12
.task{
background-color: #c5e1e6;
height: 50px;
margin-bottom: 8px;
padding: 5px 10px;
display: flex;
border-radius: 5px;
align-items: center;
justify-content: space-between;
border: 1px solid #939697;
cursor: pointer;
}

.task span是每个待办事项中的文本的样式,用于设置其字体系列、字体大小和字重。

1
2
3
4
5
.task span{
font-family: 'Poppins',sans-serif;
font-size: 15px;
font-weight: 400;
}

.task button是每个待办事项中的删除按钮的样式,用于设置其背景颜色、文本颜色、高度、宽度、边框半径、边框样式、光标类型和轮廓样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.task button{
background-color: #0a2ea4;
color: #ffffff;
height: 100%;
width: 40px;
border-radius: 5px;
border: none;
cursor: pointer;
outline: none;
}
/* 为已完成的任务设置下划线文本装饰 */
.completed{
text-decoration: line-through;
}

JavaScript

下面是添加新任务按钮的 JavaScript 代码块,定义了点击按钮时的行为。querySelector 方法会返回匹配给定选择器的第一个元素,这里匹配 ID 为 “push” 的按钮。点击按钮时,执行函数中的代码块。

1
2
3
document.querySelector('#push').onclick = function(){
/* JavaScript 代码块 */
}

首先判断输入框中的内容是否为空。如果为空,则弹出一个提示框,提示用户输入任务。如果不为空,则执行后续代码块。

1
2
3
4
5
6
if(document.querySelector('#newtask input').value.length == 0){
alert("请输入任务")
}
else{
/* JavaScript 代码块 */
}

如果输入框不为空,则会将输入框的值添加到任务列表中。这段代码使用了 innerHTML 属性将一个新的 div 元素插入到了任务列表中,其中包括任务名称和删除按钮。${document.querySelector('#newtask input').value} 是一个 ES6 模板字符串语法,用于将输入框的值插入到字符串中。

1
2
3
4
5
6
7
8
9
10
11
else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
${document.querySelector('#newtask input').value}
</span>
<button class="delete">
<i class="far fa-trash-alt"></i>
</button>
</div>
`;

最后将删除按钮的点击事件绑定到一个匿名函数上,当点击删除按钮时,它将删除任务列表中的相应任务。这里使用了 querySelectorAll 方法选择所有具有 delete 类名的元素,并使用 for 循环遍历它们,并将每个元素的点击事件绑定到一个匿名函数上。在匿名函数中,this 引用当前的删除按钮,this.parentNode 引用该按钮的父元素,也就是任务列表的 div 元素。remove() 方法用于删除该元素。

到这里我们就完成了,需要下载源码可以在我的码上掘金领取:jcode