「详细教程」HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
itomcoil 2025-01-11 13:58 19 浏览
本文将一步一步介绍如何实现下面这样的一个任务管理工具
基本结构
首先我们建立 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() 方法用于删除该元素。
相关推荐
- 最强聚类模型，层次聚类 !!_层次聚类的优缺点
-
哈喽，我是小白~咱们今天聊聊层次聚类，这种聚类方法在后面的使用，也是非常频繁的~首先，聚类很好理解，聚类（Clustering）就是把一堆“东西”自动分组。这些“东西”可以是人、...
- python决策树用于分类和回归问题实际应用案例
-
决策树（DecisionTrees）通过树状结构进行决策，在每个节点上根据特征进行分支。用于分类和回归问题。实际应用案例：预测一个顾客是否会流失。决策树是一种基于树状结构的机器学习算法，用于解决分类...
- Python教程(四十五):推荐系统-个性化推荐算法
-
今日目标o理解推荐系统的基本概念和类型o掌握协同过滤算法（用户和物品）o学会基于内容的推荐方法o了解矩阵分解和深度学习推荐o掌握推荐系统评估和优化技术推荐系统概述推荐系统是信息过滤系统，用于...
- 简单学Python——NumPy库7——排序和去重
-
NumPy数组排序主要用sort方法，sort方法只能将数值按升充排列（可以用[::-1]的切片方式实现降序排序），并且不改变原数组。例如：importnumpyasnpa=np.array(...
- PyTorch实战:TorchVision目标检测模型微调完
-
PyTorch实战：TorchVision目标检测模型微调完整教程一、什么是微调（Finetuning）？微调（Finetuning）是指在已经预训练好的模型基础上，使用自己的数据对模型进行进一步训练...
- C4.5算法解释_简述c4.5算法的基本思想
-
C4.5算法是ID3算法的改进版，它在特征选择上采用了信息增益比来解决ID3算法对取值较多的特征有偏好的问题。C4.5算法也是一种用于决策树构建的算法，它同样基于信息熵的概念。C4.5算法的步骤如下：...
- Python中的数据聚类及可视化分析实践
-
探索如何通过聚类分析揭露糖尿病预测数据集的特征！我们将运用Python的强力工具，深入挖掘数据，以直观的可视化揭示不同特征间的关系。一同探索聚类分析在糖尿病预测中的实践！所有这些可视化都可以通过数据操...
- 用Python来统计大乐透号码的概率分布
-
用Python来统计大乐透号码的概率分布，可以按照以下步骤进行：导入所需的库：使用Python中的numpy库生成数字序列，使用matplotlib库生成概率分布图。读取大乐透历史数据：从网络上找到大...
- python:支持向量机监督学习算法用于二分类和多分类问题示例
-
监督学习-支持向量机(SVM)支持向量机（SupportVectorMachine，简称SVM）是一种常用的监督学习算法，用于解决分类和回归问题。SVM的目标是找到一个最优的超平面，将不同类别的...
- 25个例子学会Pandas Groupby 操作
-
groupby是Pandas在数据分析中最常用的函数之一。它用于根据给定列中的不同值对数据点(即行)进行分组，分组后的数据可以计算生成组的聚合值。如果我们有一个包含汽车品牌和价格信息的数据集，那么可以...
- 数据挖掘流程_数据挖掘流程主要有哪些步骤
-
数据挖掘流程1.了解需求，确认目标说一下几点思考方法：做什么？目的是什么？目标是什么？为什么要做？有什么价值和意义？如何去做？完整解决方案是什么？2.获取数据pandas读取数据pd.read.c...
- 使用Python寻找图像最常见的颜色_python 以图找图
-
如果我们知道图像或对象最常见的是哪种颜色，那么可以解决图像处理中的几个用例，例如在农业领域，我们可能需要确定水果的成熟度。我们可以简单地检查一下水果的颜色是否在预定的范围内，看看它是成熟的，腐烂的，还...
- 财务预算分析全网最佳实践:从每月分析到每天分析
-
原文链接如下:「链接」掌握本文的方法，你就掌握了企业预算精细化分析的能力，全网首发。数据模拟稍微有点问题，不要在意数据细节，先看下最终效果。在编制财务预算或业务预算的过程中，通常预算的所有数据都是按月...
- 常用数据工具去重方法_数据去重公式
-
在数据处理中，去除重复数据是确保数据质量和分析准确性的关键步骤。特别是在处理多列数据时，保留唯一值组合能够有效清理数据集，避免冗余信息对分析结果的干扰。不同的工具和编程语言提供了多种方法来实现多列去重...
- Python教程(四十):PyTorch深度学习-动态计算图
-
今日目标o理解PyTorch的基本概念和动态计算图o掌握PyTorch张量操作和自动求导o学会构建神经网络模型o了解PyTorch的高级特性o掌握模型训练和部署PyTorch概述PyTorc...
- 一周热门
- 最近发表
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)