資料結構
網路
關係資料庫管理系統(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
廣告