数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用CSS和JavaScript创建一个“待办事项列表”？
待办事项列表允许您管理您的任务。它就像一个笔记。当您输入需要完成的内容时，例如下午4点的会议，您按下Enter键。按下Enter键后，任务将被添加，并且会出现另一个任务的部分，您可以在其中输入下一个任务，例如晚上7点与同事共进午餐等。
添加文本输入框以输入任务
要添加输入任务，请使用<input>。还使用placeholder属性设置占位符：
<input class="todoInput" placeholder="Add Something" />
设置输入框样式
输入框使用todoInput类。我们设置了高度、宽度等：
.todoInput {
margin-top: 10px;
padding: 10px;
width: 500px;
height: 60px;
font-size: 40px;
border: 2px solid black;
color: purple;
}
为项目设置无序列表
按下Enter键后，会出现一个新的列表项以添加新任务，因此设置了一个无序列表：
<ul id="list"></ul>
设置待办事项列表的列表项样式
对于列表项，将list-style设置为none，以便不显示项目符号。它不会像列表那样显示：
li {
text-align: left;
font-size: 22px;
list-style: none;
border: 1px solid rgb(212, 212, 212);
padding: 5px;
margin-bottom: 10px;
}
待办事项列表的脚本
输入任务并按下Enter键后，会出现下一个文本输入框以输入下一个任务：
<script>
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("- " + todoItem));
ul.appendChild(li);
todoItem = "";
li.onclick = deleteItem;
}
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
};
function deleteItem(ele) {
ele.target.parentElement.removeChild(ele.target);
}
</script>
Enter键的键码
按下Enter键后，下一个任务的空间可见。因此，Enter键的键码已处理：
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
示例
要使用CSS和JavaScript创建一个待办事项列表，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
max-width: 500px;
margin: 10px auto;
}
.todoInput {
margin-top: 10px;
padding: 10px;
width: 500px;
height: 60px;
font-size: 40px;
border: 2px solid black;
color: purple;
}
li {
text-align: left;
font-size: 22px;
list-style: none;
border: 1px solid rgb(212, 212, 212);
padding: 5px;
margin-bottom: 10px;
}
li:hover {
color: red;
}
</style>
</head>
<body>
<div style="border: 1px solid black;">
<h1 style="text-align: center;color: red;">To-do List Example</h1>
<input class="todoInput" placeholder="Add Something" />
<ul id="list"></ul>
</div>
<script>
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("- " + todoItem));
ul.appendChild(li);
todoItem = "";
li.onclick = deleteItem;
}
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
};
function deleteItem(ele) {
ele.target.parentElement.removeChild(ele.target);
}
</script>
</body>
</html>
更新于：2023年11月17日
浏览量：321
广告