在线记事本 - 免费、简单、易用 - 常规

<!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 &lt; 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();
&lt;/script&gt;
</code></pre>
</body>
</html>