前言

🔥🔥🔥小白实战🔥🔥🔥

今天我们来学习如何Coding出属于我们自己的Todo-List-待做清单!!

正文

我们要实现这样一个属于我们自己的Todo-List待做清单该如何去完成呢？

首先，我们对页面进行分析

它包括一个TO-DO list标，一个没有边框的输入框，每次输入完一个代办事项之后

会在下方生成一个复选选框和代办事项。当选中后，代办事项会被添加一个删除线，并且变为灰色！

由此观之，我们需要一个html文件，一个css文件,一个js文件。

编写HTML文件

我们的html文件相当简单!!只需要一个标题和表单，还有一个ul!

我们的代码可以这样写：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div>
        <h3>TO-DO list</h3>
        <input type="text" name="" id="list-input" placeholder="请输入代办事项">
        <ul id="list">
        </ul>
    </div>
    <script src="./index.js">
        
    </script>
</body>
</html>

我们在头文件中引入我们的style.css文件，在body中引入index.js文件
在一个div中定义一个h3和一个input和ul标签
input标签中设置id为list-input,默认显示placeholder="请输入代办事项"
ul标签的id设置为list

编写CSS文件

在我们的style.css文件中，我们的样式可以这样设置:

css 复制代码

ul li{
    list-style: none;
    
}
input{
    border: none;
    outline: none;
}
body{
    margin-top: 0;
    margin-left: 0;
}
h3{
    text-align: center;
}
div{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 250px;
}

ul li{}：这个选择器将应用于所有的<ul>元素下的<li>元素。list-style: none;将去除列表项前面的标记（例如圆点或数字）。
input{}：这个选择器将应用于所有的<input>元素。border: none;将去除输入框的边框，而outline: none;将去除输入框周围的轮廓线。
body{}：这个选择器将应用于整个HTML文档的<body>元素。margin-top: 0; 和 margin-left: 0; 将去除页面顶部和左侧的外边距，这可以使页面内容更接近页面的顶部和左侧边缘。
h3{}：这个选择器将应用于所有的<h3>元素。text-align: center; 将文本居中对齐。
div{}：这个选择器将应用于所有的<div>元素。position: absolute; 将元素定位在相对于最近的定位祖先元素的绝对位置。如果元素没有定位的祖先元素，那么它会相对于初始包含块进行定位。然后，left: 50%; 将元素的左边缘移动到其包含块的中心，而 transform: translate(-50%); 则将元素的中心点移到其包含块的中心。这通常被称为"水平居中"的一种方式。最后，width: 250px; 设置了元素的宽度为250像素。

编写js文件

在index.js文件中，我们可以这样写：

js 复制代码

// 监听用户敲击Enter键
var input =document.getElementById('list-input')
var ul = document.getElementById('list')
var oldlength=0;

var todoItem = []
input.onkeyup=function(e){
    if(e.keyCode===13){
        if(input.value!=''){
            todoItem.push(input.value)
            makeList()
            input.value=''
        }
    }
}
function makeList(){
    //循环数组todoItem生成多份li结构,添加到ul中
    //for循环
    //todoItem.length
    //生成li
    for(i=oldlength;i<todoItem.length;i++){
        oldlength = todoItem.length
        console.log(todoItem[i].value)
        todoli=`
        <li>
                <input type="checkbox" id="checkbox" onclick="checkboxOnclick(this)">
                 <span> ${todoItem[i]} </span>
        </li>
        `
        ul.insertAdjacentHTML('afterbegin',todoli)
    }
}

 function checkboxOnclick(checkbox){
    if(checkbox.checked==true){
       checkbox.parentNode.style.color="grey"
       checkbox.parentNode.style.textDecoration="line-through"
    }else{
        checkbox.parentNode.style.color="black"
       checkbox.parentNode.style.textDecoration="none"
    }


}

这段代码是一个简单的待办事项（TO-DO list）应用，用户可以在输入框中输入待办事项，点击Enter键后，该事项将作为一项待办事项添加到列表中。每个待办事项都可以通过点击前面的复选框来标记为已完成或未完成。

通过document.getElementById获取输入框和列表的DOM元素。
通过onkeyup事件监听输入框，当用户敲击Enter键时，调用相应函数。
在该函数中，检查输入框的值是否为空，如果不为空，则将该值添加到todoItem数组中，并调用makeList函数生成并显示新的待办事项列表。
makeList函数通过循环todoItem数组，为每个待办事项生成一个li元素，并将其添加到列表中。
还定义了一个checkboxOnclick函数，用于处理复选框的点击事件。当复选框被选中时，将该项的颜色设置为灰色，并添加删除线（表示已完成）；当复选框未被选中时，将该项的颜色设置为黑色，并删除删除线（表示未完成）。

最后效果

这样，我们就实现了这样一个简单的Todo-List 待做事项清单实战啦！！

如果你有任何改进和想法，欢迎在评论区留言！！留下一个小小的赞鼓励支持一下吧！！！🌹🌹🌹

🔥小白实战--Todo-List-待做清单 属于自己的待做清单

前言

正文

编写HTML文件

编写CSS文件

编写js文件

最后效果

🔥小白实战--Todo-List-待做清单属于自己的待做清单