写一个网页有记事本功能可以添加数据和删除数据
<!DOCTYPE html>
<html>
<head>
<title>记事本</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
margin-top: 40px;
font-size: 36px;
color: #333;
}
.container {
margin: 0 auto;
max-width: 800px;
padding: 20px;
}
.note {
margin: 20px 0;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
}
.note h2 {
font-size: 24px;
margin-top: 0;
color: #333;
}
.note p {
font-size: 16px;
margin-top: 10px;
color: #666;
}
.note .delete {
position: absolute;
top: 5px;
right: 5px;
font-size: 16px;
color: red;
cursor: pointer;
}
.form {
margin-top: 40px;
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.form label {
display: block;
font-size: 18px;
margin-bottom: 10px;
color: #333;
}
.form input[type="text"] {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
}
.form button {
background-color: #333;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>记事本</h1>
<div class="container">
<div id="notes">
<!-- 这里会动态生成记事本列表 -->
</div>
<div class="form">
<label for="title">标题</label>
<input type="text" id="title" placeholder="请输入标题">
<label for="content">内容</label>
<input type="text" id="content" placeholder="请输入内容">
<button onclick="addNote()">添加</button>
</div>
</div>
<script>
// 记录所有的记事本数据
let notes = [];
<pre><code> // 获取 DOM 元素
let notesDiv = document.getElementById("notes");
let titleInput = document.getElementById("title");
let contentInput = document.getElementById("content");
// 添加记事本
function addNote() {
// 获取输入的标题和内容
let title = titleInput.value;
let content = contentInput.value;
// 创建一条记事本数据
let note = {
title: title,
content: content
};
// 将数据添加到数组中
notes.push(note);
// 清空输入框
titleInput.value = "";
contentInput.value = "";
// 刷新记事本列表
renderNotes();
}
// 删除记事本
function deleteNote(index) {
// 从数组中删除指定数据
notes.splice(index, 1);
// 刷新记事本列表
renderNotes();
}
// 刷新记事本列表
function renderNotes() {
// 清空记事本列表
notesDiv.innerHTML = "";
// 遍历所有记事本数据，动态创建 HTML 元素
for (let i = 0; i < notes.length; i++) {
let note = notes[i];
let noteDiv = document.createElement("div");
noteDiv.classList.add("note");
let titleH2 = document.createElement("h2");
titleH2.innerText = note.title;
let contentP = document.createElement("p");
contentP.innerText = note.content;
let deleteSpan = document.createElement("span");
deleteSpan.classList.add("delete");
deleteSpan.innerText = "删除";
deleteSpan.setAttribute("data-index", i);
deleteSpan.onclick = function() {
let index = this.getAttribute("data-index");
deleteNote(index);
};
noteDiv.appendChild(titleH2);
noteDiv.appendChild(contentP);
noteDiv.appendChild(deleteSpan);
notesDiv.appendChild(noteDiv);
}
}
// 初始化页面
renderNotes();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bN1g 著作权归作者所有。请勿转载和采集!