【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList

海拥✘

已于 2023-04-12 10:44:21 修改

阅读量4k

点赞数 4

分类专栏： 100个前端优质项目文章标签： css javascript html

于 2023-04-12 10:10:24 首次发布

本文链接：https://blog.csdn.net/qq_44273429/article/details/130086415

版权

100个前端优质项目专栏收录该内容

41 篇文章 43 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

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

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

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

基本结构

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

<!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

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

<div class="container">
    <div id="newtask">
        <input type="text" placeholder="要完成的任务..">
        <button id="push">添加</button>
    </div>

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

CSS

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

    	*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

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像素。

.container{
    width: 40%;
    min-width: 450px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 10px;
}

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

#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是待办事项列表的样式，用于设置其背景颜色、内边距、顶部外边距、边框半径、宽度和相对定位。

#tasks{
    background-color: #ffffff;
    padding: 30px 20px;
    margin-top: 10px;
    border-radius: 10px;
    width: 100%;
    position: relative;
}

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

.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是每个待办事项中的文本的样式，用于设置其字体系列、字体大小和字重。

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

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

.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” 的按钮。点击按钮时，执行函数中的代码块。

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

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

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

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

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

⭐️ 好书推荐

《Web前端开发全程实战》

在这里插入图片描述

【内容简介】

《Web前端开发全程实战——HTML5+CSS3+JavaScript+jQuery+Bootstrap》从初学者角度出发，结合大量实例讲解了如何使用HTML5、CSS3、JavaScript、jQuery、Ajax、Boostrap、Vue、PHP 等基本技术搭建Web 前端，力求向读者提供一套极简的Web 前端一站式高效学习方案。全书共28 章，内容包括HTML5基础、设计HTML5 文档结构、设计HTML5 文本、设计HTML5 图像和多媒体、设计列表和超链接、设计表格和表单、CSS3 基础、设计文本样式、设计特效和动画样式、CSS 页面布局、JavaScript 基础、处理字符串、使用数组、使用函数、使用对象、jQuery 基础、文档操作、事件处理、使用Ajax、CSS 样式操作、jQuery 动画、Bootstrap基础、CSS 组件、JavaScript 插件、使用Vue、PHP 基础、使用PHP 与网页交互、使用PDO 操作数据库、项目实战。

在这里插入图片描述