ToDoList——原生JavaScript（超详细）

青青草原小魔王

已于 2022-08-02 15:32:07 修改

阅读量1.3k

点赞数 7

分类专栏： JavaScript 文章标签：前端 html javascript es6 css3

于 2022-08-02 15:10:04 首次发布

本文链接：https://blog.csdn.net/qq_65715980/article/details/126122507

版权

这篇博客详细介绍了如何使用原生JavaScript实现一个ToDoList应用。涵盖了CSS样式设计，HTML内容构建以及JavaScript部分的实现，包括添加、删除和编辑任务等功能。通过阅读，读者将学习到如何创建一个功能完备的Todo应用。

摘要由CSDN通过智能技术生成

一、效果展示

二、ToDoList——css样式

三、ToDoList——html内容

四、ToDoList——JavaScript部分

一、效果展示

二、ToDoList——css样式

由于系统限制，所以只能把css样式代码拿出来，有点丑，别介意哦！！！

body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}

ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;