同学们前面已经学习了html css javascript基础部分了，为了巩固和熟练前面所学的知识，从今天起，我们要做一个待办事件列表的项目。通过项目实战夯实基础，将所学的知识真正用到实战中，强化对网页设计的能力，体验使用vscode进行网页编程。
一、待办事件列表制作
任务1.1创建待办事件列表文件
任务描述
主要实现的是项目文件夹的创建。
任务实施
首先我们先新建一个本地文件夹To do 如下图：
在vscode中打开这个文件夹，以后的待办事件列表的项目就在这个文件夹中进行。
再新建的文件夹中，再次创建一个新文件夹用来放置源代码文件。该文件夹中应包含三个文件分别为html文件、css文件、js文件。如下图：
任务2.1 项目制作
任务目标
学生能够自己完成写一个待办事件列表的项目网站。
任务描述
本任务主要分为三个部分，先是搭建一个html框架，第二部分是将搭建好的html进行css部分。最后进行js部分的完成实现相应功能。
主要功能：在输入框输入待办，按下回车键，输入框下方会生成一条
待办，点击左键会对该待办添加删除线，点击右键会删除该待办。
最终页面结果：
任务2.2 HTML框架部分
页面分析
根据最后的运行结果图可以看出最上面是一个大的标题，下面有一个输入框最下面写出了相应的内容。
任务实施
分析完成之后我们可以开始进行编写，在<body>中先写入一个h1标签在里面写入大标题。往下来可以先新建一个<from>表单里面放入一个输入框标签。注意：
在最后的功能中我们会实现一个当我们在输入框中输入一个待办，点击回车键在输入框下方会生成一条内容用来显示当前的待办内容。所以我们要留一个<ul>,在后续的js部分用来实现新建<li>节点把新建的<li>节点插入到<ul>中。所以我们需要在表单中输入框下方新建一个空的<ul>标签。
表单建立完成之后，在表单的下方可以新建一个<span>里面写入相应的功能说明。
<h1>待办事项</h1>
<form id="form">
<input type="text" class="input" id="input" placeholder="输入你的待办事项" >
<ul class="todos" id="todos"></ul>
</form>
<span>左键单击可切换完成状态 <br> 右键单击以删除待办事项</span>效果图：
注意：我们要把之后需要使用的标签进行设置类名和id注意类名规范
任务2.3 CSS基本样式
任务目标
对新建的html框架进行页面美化。
任务实施
1.总体布局
先设置总体body部分的样式，主要是将网页的布局模式设置为弹性盒布局。设置弹性盒子方向为列方向，子元素将沿纵向排列。子元素在交叉轴（横轴）上居中对齐。子元素在主轴（纵轴）上居中对齐。
body {
background-color: #f5f5f5; //设置背景颜色为浅灰色。
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
margin-top: 200px; //在顶部添加200像素的外边距。
}
-
2.标签样式
接下来对各种标签的样式设置
h1 {
color: rgb(219, 199, 237);
font-size: 165px;
text-align: center; /* 文本居中对齐 */
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影，增强层次感 */
max-width: 100%; /* 设置最大宽度为100% */
width: 400px;
}
.input {
border: none; /* 无边框 */
color: #444; /* 字体颜色为深灰色 */
font-size: 32px;
padding: 16px 32px; /* 设置内边距 */
display: block; /* 转换为块级元素 */
width: 90%;
}
.input::placeholder {
color: #d5d5d5; /* 设置占位符颜色为浅灰色 */
}
.input:focus {
outline-color: rgb(179, 131, 226); /* 设置聚焦时输入框边框颜色为淡紫色 */
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style: none; /* 无列表样式 */
}
span {
color: #b5b5b5;
margin-top: 30px;
text-align: center;
}
ul{
user-select: none; /* 禁止用户选中列表内容 */
}
到目前为止基本的css样式设置完毕，结果如图：
注意：
此时我们最后需要创建的<li>部分的样式没有设置，在最后的js创建完节点后在设置即可。
任务2.4 JS功能实现部分
任务目标
实现输入完待办事项之后获取到输入的内容，以及将其添加到要新创建的节点<li>中，并完成左右键功能的实现。
任务实施
1.实现创建功能
先通过document.querySelector选择了表单(form)、输入框(input)和未排序列表(ul)作为变量。
const form = document.querySelector('form');
const input = document.querySelector('input');
const list = document.querySelector('ul');然后添加一个事件监听器，当表单提交时触发该函数。
在事件监听器中创建一个新的li元素，将输入框的值添加到该元素中，并将其添加到未排序列表中。还要写入e.preventDefault(); 防止表单默认提交行为
form.addEventListener('submit', function(e) {
const li = document.createElement('li');
li.textContent = input.value;
list.appendChild(li);
e.preventDefault();}）2.左右键点击功能
接下来进行左右键点击的对应功能的实现。
- 先是左键功能：当点击左键的时候，将该待办添加删除键和颜色改变的样式，并且再次点击的时候会变为初始状态。
注意：这里的再次点击回到原来的状态可以通过定义一个completed属性，初始值为false，用于标记该待办事项是否已完成。
li.completed = false;
li.addEventListener('click', function(e) {
if (e.button === 0) {
li.completed = !li.completed;
if (li.completed) {
li.style.color = '#b6b6b6';
li.style.textDecoration = 'line-through';
} else {
li.style.color = '';
li.style.textDecoration = '';
}
}
})
- 其次是点击鼠标右键时的功能实现：这个相对于左键要简单，只需要一个监听器在监听器中 实现li的删除功能。
大体内容就是为每个li项添加右键点击事件监听器，防止默认的右键菜单出现，并将该待办事项从列表中移除。
li.addEventListener('contextmenu', function(e) {
e.preventDefault();
li.remove();
});
})3.新建li的样式设置
最后不要忘了新建的li样式
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer; /* 鼠标悬停时显示手指光标 */
font-size: 17px;
width: 424px;
height: 45px;
line-height: 45px; /* 行高与高度相同，使文本垂直居中 */
text-indent: 2em; /* 首行缩进2个字母宽度 */
}任务2.5 对该项目进行整合
全部代码编辑完成之后在html中进行引用。
<link rel="stylesheet" href="Todo.css">
<body>........</body>
<script src="Todo.js"></script>注意引用位置！！！
最终全部代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<link rel="stylesheet" href="Todo.css">
</head>
<body>
<h1>待办事项</h1>
<form id="form">
<input type="text" class="input" id="input" placeholder="输入你的待办事项" >
<ul class="todos" id="todos"></ul>
</form>
<span>左键单击可切换完成状态 <br> 右键单击以删除待办事项</span>
<script src="Todo.js"></script>
</body>
</html>CSS:
body {
background-color: #f5f5f5;
color: #444;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
margin-top: 200px;
}
h1 {
color: rgb(219, 199, 237);
font-size: 165px;
text-align: center;
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: 400px;
}
.input {
border: none;
color: #444;
font-size: 32px;
padding: 16px 32px;
display: block;
width: 90%;
}
.input::placeholder {
color: #d5d5d5;
}
.input:focus {
outline-color: rgb(179, 131, 226);
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style: none;
display: block;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 17px;
width: 424px ;
height: 45px;
line-height: 45px;
text-indent: 2em;
overflow: hidden;
}
span {
color: #b5b5b5;
margin-top: 30px;
text-align: center;
}
ul{
user-select: none;
}
JS:
const form = document.querySelector('form');
const input = document.querySelector('input');
const list = document.querySelector('ul');
form.addEventListener('submit', function(e) {
const li = document.createElement('li');
li.textContent = input.value;
list.appendChild(li);
e.preventDefault();
li.completed = false;
li.addEventListener('click', function(e) {
if (e.button === 0) {
li.completed = !li.completed;
if (li.completed) {
li.style.color = '#b6b6b6';
li.style.textDecoration = 'line-through';
} else {
li.style.color = '';
li.style.textDecoration = '';
}
}
})
li.addEventListener('contextmenu', function(e) {
e.preventDefault();
li.remove();
});
})项目结果展示
以上就是我们待办事件列表的这个项目案例解析，大家跟着这个步骤一点一点来，会对自己网页设计方面的能力有很大提升。
扫一扫
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
