成品如下图：
目前这版只有简单的输入和删除功能，仅一张，适合展示使用，极其简洁 内置管理员登录与退出，可直接在线编辑
源代码：提供两个版本
1.仅自己可见版（储存在浏览器中）
默认账户密码都是admin（自行修改username === 'admin' && password === 'admin'）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>记事本</title>
<style>
body {
margin: 20px auto;
max-width: 800px;
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
#login-container {
position: fixed;
top: 20px;
right: 20px;
text-align: right;
}
#editor {
min-height: 400px;
padding: 20px;
border: 1px solid #ddd;
margin-top: 40px;
outline: none;
}
.readonly {
background: #f9f9f9;
color: #666;
}
.login-form {
display: none;
background: white;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
button {
padding: 5px 10px;
background: #f0f0f0;
border: 1px solid #ddd;
cursor: pointer;
}
input {
margin: 5px;
padding: 5px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="login-container">
<button onclick="toggleLogin()" id="loginBtn">登录</button>
<div class="login-form">
<input type="text" id="username" placeholder="账号">
<input type="password" id="password" placeholder="密码">
<button onclick="login()">提交</button>
</div>
</div>
<div id="editor" contenteditable="false"></div>
<script>
// 初始化检查登录状态
window.onload = function() {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
const savedContent = localStorage.getItem('notepadContent') || '';
document.getElementById('editor').innerHTML = savedContent;
updateEditorState(isLoggedIn);
};
// 切换登录表单显示
function toggleLogin() {
document.querySelector('.login-form').style.display =
document.querySelector('.login-form').style.display === 'block' ? 'none' : 'block';
}
// 登录功能
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'admin' && password === 'admin') {
localStorage.setItem('isLoggedIn', 'true');
updateEditorState(true);
toggleLogin();
} else {
alert('账号或密码错误');
}
}
// 更新编辑器状态
function updateEditorState(isEditable) {
const editor = document.getElementById('editor');
editor.contentEditable = isEditable;
editor.classList.toggle('readonly', !isEditable);
document.getElementById('loginBtn').innerHTML = isEditable ? '退出' : '登录';
document.getElementById('loginBtn').onclick = isEditable ? logout : toggleLogin;
}
// 退出登录
function logout() {
localStorage.removeItem('isLoggedIn');
updateEditorState(false);
}
// 自动保存内容
document.getElementById('editor').addEventListener('input', function() {
localStorage.setItem('notepadContent', this.innerHTML);
});
</script>
</body>
</html>2.可供其他设备查看版
默认账户密码都是admin（自行修改login.php中的$valid_credentials）
前端：index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>记事本</title>
<style>
body {
margin: 20px auto;
max-width: 800px;
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
#login-container {
position: fixed;
top: 20px;
right: 20px;
text-align: right;
}
#editor {
min-height: 400px;
padding: 20px;
border: 1px solid #ddd;
margin-top: 40px;
outline: none;
}
.readonly {
background: #f9f9f9;
color: #666;
}
.login-form {
display: none;
background: white;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
button {
padding: 5px 10px;
background: #f0f0f0;
border: 1px solid #ddd;
cursor: pointer;
}
input {
margin: 5px;
padding: 5px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="login-container">
<button onclick="toggleLogin()" id="loginBtn">登录</button>
<div class="login-form">
<input type="text" id="username" placeholder="账号">
<input type="password" id="password" placeholder="密码">
<button onclick="login()">提交</button>
</div>
</div>
<div id="editor" contenteditable="false"></div>
<script>
// 服务器接口配置
const API = {
getContent: 'get_content.php',
saveContent: 'save_content.php',
login: 'login.php'
}
// 初始化加载内容
window.onload = async function() {
const response = await fetch(API.getContent);
const data = await response.json();
document.getElementById('editor').innerHTML = data.content || '';
checkLoginStatus();
}
// 检查登录状态
async function checkLoginStatus() {
const response = await fetch(API.login);
const data = await response.json();
updateEditorState(data.loggedIn);
}
// 切换登录表单
function toggleLogin() {
document.querySelector('.login-form').style.display =
document.querySelector('.login-form').style.display === 'block' ? 'none' : 'block';
}
// 登录功能
async function login() {
const formData = new FormData();
formData.append('username', document.getElementById('username').value);
formData.append('password', document.getElementById('password').value);
const response = await fetch(API.login, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
updateEditorState(true);
toggleLogin();
} else {
alert('登录失败');
}
}
// 更新编辑器状态
function updateEditorState(isEditable) {
const editor = document.getElementById('editor');
editor.contentEditable = isEditable;
editor.classList.toggle('readonly', !isEditable);
document.getElementById('loginBtn').innerHTML = isEditable ? '退出' : '登录';
document.getElementById('loginBtn').onclick = isEditable ? logout : toggleLogin;
}
// 退出登录
async function logout() {
await fetch(API.login + '?action=logout');
updateEditorState(false);
}
// 保存内容到服务器
let saveTimer;
document.getElementById('editor').addEventListener('input', function() {
clearTimeout(saveTimer);
saveTimer = setTimeout(async () => {
const content = this.innerHTML;
await fetch(API.saveContent, {
method: 'POST',
body: JSON.stringify({ content }),
headers: {
'Content-Type': 'application/json'
}
});
}, 1000);
});
</script>
</body>
</html>后端(文件须同名)：login.php
<?php
session_start();
// 简单账号验证
$valid_credentials = ['admin' => 'admin'];
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
if (isset($valid_credentials[$username]) && $valid_credentials[$username] === $password) {
$_SESSION['logged_in'] = true;
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
exit;
}
// 登出处理
if (isset($_GET['action']) && $_GET['action'] === 'logout') {
session_destroy();
echo json_encode(['loggedIn' => false]);
exit;
}
// 检查登录状态
echo json_encode(['loggedIn' => isset($_SESSION['logged_in']) && $_SESSION['logged_in']]);
?>save_content.php
<?php
session_start();
if (!isset($_SESSION['logged_in']) || !$_SESSION['logged_in']) {
http_response_code(403);
exit;
}
$data = json_decode(file_get_contents('php://input'), true);
$content = $data['content'] ?? '';
// 保存到文本文件
file_put_contents('saved_content.txt', $content);
echo json_encode(['success' => true]);
?>get_content.php
<?php
// 读取保存的内容
$content = @file_get_contents('saved_content.txt') ?: '';
echo json_encode(['content' => $content]);
?>
Comments NOTHING