前端网站（三）-- 记事本【附源码】
开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~
此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。
但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！
页面效果：多种颜色搭配的动态粒子背景特效（粒子会随着鼠标的移动进行吸附，好看又好玩），左右摆动的文字特效，记事本的内容也可以长期的保存在浏览器中
一：留言板.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>私人留言板</title><link rel="stylesheet" href="CSS/留言板.css">
</head>
<body>
<h1>专属记事薄</h1><div class="container"><form id="messageForm"><textarea id="messageInput" placeholder="请输入你的留言..." style="color: #dc6515"></textarea><button type="submit">提交留言</button><button id="submitButton">显示留言</button></form><div id="messages"><!-- 留言 --></div></div><script src="JS/留言板.js"></script><script>!(function () {function n(n, e, t) {return n.getAttribute(e) || t;}function e(n) {return document.getElementsByTagName(n);}function t() {var t = e("script"),o = t.length,i = t[o - 1];return {l: o,z: n(i, "zIndex", -1),o: n(i, "opacity", 0.6),c: n(i, "color", "0,255,0"), // 默认粒子颜色（现在将在代码中忽略）n: n(i, "count", 400), // 粒子的数量};}function o() {(a = m.width =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth),(c = m.height =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight);}function i() {r.clearRect(0, 0, a, c);var n, e, t, o, m, l;s.forEach(function (particle, index) {for (particle.x += particle.xa,particle.y += particle.ya,particle.xa *= particle.x > a || particle.x < 0 ? -1 : 1,particle.ya *= particle.y > c || particle.y < 0 ? -1 : 1,// 使用粒子的颜色属性进行绘制r.fillStyle = particle.color,r.fillRect(particle.x - 0.5, particle.y - 0.5, 1, 1),e = index + 1;e < u.length;e++) {(n = u[e]),null !== n.x &&null !== n.y &&((o = particle.x - n.x),(m = particle.y - n.y),(l = o * o + m * m),l < n.max &&(n === y &&l >= n.max / 2 &&((particle.x -= 0.03 * o), (particle.y -= 0.03 * m)),(t = (n.max - l) / n.max),r.beginPath(),(r.lineWidth = t / 2),// 连线颜色也可以设置为随机，这里暂时保持和粒子颜色一致r.strokeStyle = particle.color,r.moveTo(particle.x, particle.y),r.lineTo(n.x, n.y),r.stroke()));}}),x(i);}var fixedColors = ["rgba(255, 0, 0, 1.0)", // 红色"rgba(0, 255, 0, 1.0)", // 绿色"rgba(0, 0, 255, 1.0)", // 蓝色"rgba(255, 255, 0, 1.0)", // 黄色"rgba(0, 255, 255, 0.8)", // 青色"rgba(255, 0, 255, 0.8)", // 紫色"rgba(255, 165, 0, 0.8)", // 橙色"rgba(127, 255, 212, 1.0)","rgba(0, 255, 127, 1.0)"];var a,c,u,m = document.createElement("canvas"),d = t(),l = "c_n" + d.l,r = m.getContext("2d"),x =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (n) {window.setTimeout(n, 1e3 / 45);},w = Math.random,y = { x: null, y: null, max: 2e4 };(m.id = l),(m.style.cssText ="position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),e("body")[0].appendChild(m),o(),(window.onresize = o),(window.onmousemove = function (n) {(n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);}),(window.onmouseout = function () {(y.x = null), (y.y = null);});//固定颜色for (var s = [], f = 0; d.n > f; f++) {var h = w() * a,g = w() * c,v = 2 * w() - 1,p = 2 * w() - 1,// 从固定颜色数组中随机选择一个颜色color = fixedColors[Math.floor(Math.random() * fixedColors.length)];s.push({ x: h, y: g, xa: v, ya: p, max: 6e3, color: color }); // 使用选定的固定颜色}(u = s.concat([y])),setTimeout(function () {i();}, 100);})();</script>
</body>
</html>
二：留言板.css
body {font-family: Arial, sans-serif;text-align: center; /* 使body内的内容水平居中 */display: flex;flex-direction: column; /* 垂直布局 */align-items: center; /* 垂直居中（对于单行内容） */margin: 0;padding-top: 50px; /* 根据需要调整h1与顶部的距离 */
}.container {max-width: 600px; /* 限制留言板容器的最大宽度 */width: 100%; /* 响应式宽度 */text-align: left; /* 重置文本对齐方式，如果需要的话 */
}textarea {width: 100%;height: 100px;margin-bottom: 10px;font-weight: bold;
}#messages {margin-top: 60px; /*边框线宽度*/
}#messageForm textarea {width: 100%; /*边框宽度*/height: 100px; /*边框高度*/margin-bottom: 10px; /*按钮与边框的垂直距离*/
}.message {background-color: #f4f4f4; /*删除栏的颜色*/padding: 10px;margin-bottom: 10px;border-radius: 5px;
}.delete-button {float: right;cursor: pointer;color: red;background-color: #f0adad; /* 添加背景色 */border: none; /* 移除边框 */padding: 5px 10px; /* 添加内边距 */border-radius: 5px; /* 圆角 */margin-left: 10px; /* 与文本内容间隔 */
}.delete-button:hover { /* 鼠标悬停效果 */background-color: #e09dad;
}
h1 {font-size: 48px;font-weight: 600;animation: rotate 0.3s ease infinite;width: fit-content; /* 确保h1的宽度适应其内容 */margin-bottom: 20px; /* 增加h1与留言板内容之间的垂直间距 */
}@keyframes rotate {0% {transform: rotate(0);}20% {transform: rotate(-2deg);}60% {transform: rotate(0);}80% {transform: rotate(2deg);}100% {transform: rotate(0);}}
三：留言板.js
document.addEventListener('DOMContentLoaded', function() {const form = document.getElementById('messageForm');const messageInput = document.getElementById('messageInput');const messagesContainer = document.getElementById('messages');const submitButton = document.getElementById('submitButton');submitButton.addEventListener('click', function() {loadMessages(); // 直接调用loadMessages来重新加载并显示留言});// 从localStorage加载留言loadMessages();form.addEventListener('submit', function(e) {e.preventDefault(); // 阻止表单默认提交行为const messageText = messageInput.value.trim();if (messageText) {// 将留言保存到localStorage并显示在页面上saveMessage(messageText);messageInput.value = ''; // 清空输入框}// else {// alert('请输入留言内容！');// }});function saveMessage(messageText) {const messages = JSON.parse(localStorage.getItem('messages')) || [];const newMessage = { text: messageText, timestamp: Date.now() };messages.push(newMessage);localStorage.setItem('messages', JSON.stringify(messages));displayMessages();}function loadMessages() {const savedMessages = JSON.parse(localStorage.getItem('messages'));if (savedMessages) {displayMessages(savedMessages);}}function displayMessages(loadedMessages = []) {messagesContainer.innerHTML = ''; // 清空留言容器loadedMessages.forEach(function(message) {const messageElem = document.createElement('div');messageElem.classList.add('message');const textElem = document.createElement('span');textElem.textContent = new Date(message.timestamp).toLocaleString() + ': ' + message.text;messageElem.appendChild(textElem);const deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.classList.add('delete-button'); // 使用正确的类名deleteButton.addEventListener('click', function() {removeMessage(message.timestamp);});messageElem.appendChild(deleteButton);messagesContainer.appendChild(messageElem);});}function removeMessage(timestamp) {const messages = JSON.parse(localStorage.getItem('messages')) || [];const filteredMessages = messages.filter(msg => msg.timestamp !== timestamp);localStorage.setItem('messages', JSON.stringify(filteredMessages));displayMessages(filteredMessages); // 重新渲染留言列表}});
注意： 本页面就到这里啦~ ~ ~源码复制粘贴直接可用，期待一下下一个页面功能叭
相关文章：
前端网站（三）-- 记事本【附源码】
开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~ 此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面…...
java——Junit单元测试
测试分类 黑盒测试：不输入代码，给输入值，看程序能够给出期望的值。 白盒测试：写代码，关注程序具体执行流程。 JUnit单元测试 一个测试框架，供java开发人员编写单元测试。 是程序员测试，即白…...
Scala学习笔记17: Try与异常处理
目录 第十七章 Try与异常处理1- 异常的抛出和捕获1. 异常抛出2. 异常捕获 2- 函数式的错误处理1. Try 类型2. 使用 Try3. 处理 Try 结果4. Try 的常用方法5. Try 的优势总结 end 第十七章 Try与异常处理 1- 异常的抛出和捕获 Scala 的异常处理机制与 Java非常相似, 但也有一些…...
内网信息收集——MSF信息收集浏览器记录配置文件敏感信息
文章目录 一、配置文件敏感信息收集二、浏览器密码&记录三、MSF信息收集 域控：windows server 2008 域内机器：win7 攻击机：kali 就是红日靶场（一）的虚拟机。 一、配置文件敏感信息收集 使用searchall64.exe&#…...
C++ STL中的std::remove_if 的用法详解
在现代C++编程中，标准模板库（STL）提供了一系列功能强大的算法，这些算法极大地简化了日常的编程任务。其中，std::remove_if是一个非常实用的函数，它允许我们从容器中移除满足特定条件的所有元素。本文将深入探讨std::remove_if的使用方法，并通过一个具体的例子——基于St…...
基于AT89C51单片机的16×16点阵LED显示器字符滚动显示设计（含文档、源码与proteus仿真，以及系统详细介绍）
本篇文章论述的是基于AT89C51单片机的1616点阵LED显示器字符滚动显示设计的详情介绍，如果对您有帮助的话，还请关注一下哦，如果有资源方面的需要可以联系我。 目录 仿真效果图 仿真图 代码 系统论文 资源下载 设计的内容和要求 熟悉51系…...
Docker 日志丢失 - 解决方案
Docker 日志默认使用的是 journald 的方式. RateLimitBurst 是 journald 的一个参数，用于限制日志的速率。如果日志的生成速度超过这个限制，journald 可能会丢弃日志。你可以通过调整这个参数来避免日志被丢弃。 调整 RateLimitBurst 和 RateLimitInte…...
物联网环境下机器人隐私保护法律框架研究-隐私保护法律监管平台
1. 引言 物联网技术的发展推动了机器人在家庭、医疗、工业等领域的广泛应用。然而，这些智能设备在数据采集和处理过程中面临着巨大的隐私保护挑战。本设计方案旨在构建一个全面的隐私保护法律监管平台，确保物联网环境下机器人的隐私数据得到有效保护，并符合相关法律法规的要…...
设计模式-创建型模式之工厂方法模式
和简单工厂模式中工厂负责生产所有产品相比，工厂方法模式将生成具体产品的任务分发给具体的产品工厂，定义一个用于创建对象的接口，让子类决定实例化哪个产品类对象。 工厂方法模式的主要角色: 抽象工厂(AbstractFactory):提供了创建产品的接…...
婚礼成本与筹备策略：一场梦幻婚礼的理性规划
婚礼成本与筹备策略：一场梦幻婚礼的理性规划 摘要 婚礼，作为人生中的重要仪式，承载着新人的爱情与梦想，同时也伴随着不菲的经济投入。本文旨在探讨婚礼所需的大致成本、影响成本的主要因素以及婚礼筹备过程中的关键注意事项&…...
前端a-tree遇到的问题
在使用a-tree时候，给虚拟滚动的高度，然后展开a-tree滑动一段距离 比如这样 随后你切换页面，在返回这个页面的时候 就会出现这样的bug 解决方法： onBeforeRouteLeave((to, from, next) > {// 可以在路由参数变化时执行的逻辑ke…...
SpringCloud教程 | 第十篇: 读取Nacos的配置
1、引入依赖 <dependency><groupId>com.alibaba.boot</groupId><artifactId>nacos-config-spring-boot-starter</artifactId><version>0.2.7</version></dependency> 2、在启动类加上 NacosPropertySource(dataId"nac…...
漏洞-Alibaba Nacos derby 远程代码执行漏洞
【漏洞详情】 漏洞描述：Alibaba Nacos derby 存在远程代码执行漏洞，由于Alibaba Nacos部分版本中derby数据库默认可以未授权访问，恶意攻击者利用此漏洞可以未授权执行SQL语句，从而远程加载恶意构造的jar包，最终导致任意…...
SpringBoot解决Apache Tomcat输入验证错误漏洞
Apache Tomcat是美国阿帕奇（Apache）基金会的一款轻量级Web应用服务器。该程序实现了对Servlet和JavaServer Page（JSP）的支持。 Apache Tomcat存在输入验证错误漏洞，该漏洞源于HTTP/2请求的输入验证不正确，会…...
echarts解决数据差异过大的问题
问题描述 使用echarts折线图和柱状图展示数据时，如果数据差异值较大，会导致显示图形差异过大，图表不美观。 如这一组数据[2000000, 200, 0.1, 20, 0, -10, -3000]，渲染出来的效果如下图： 可以看到由于最大值和最小值差…...
Oracle 常用系统
常用系统包 查看系统包 SELECT * FROM all_objects WHERE object_type PACKAGE AND owner SYS AND object_name 包名称;AUTO_SERVER_PKG AUTO_SERVER_PKG 在Oracle数据库的上下文中，并不是一个标准的Oracle系统包或内置功能。然而，在参考文章中提到…...
WPS点击Zotero插入没有任何反应
wps个人版没有内置vba，因此即便一下插件安装上了（如Axmath，zotero），当点击插件的时候会出现“点不动”、“点击插件没反应的现象。至于islide一类的插件，干脆连装都装不上。 这就需要手动安装一下vba。 针…...
uniapp 实现上传文件的功能
上传单个文件 <script setup>const handleUploadClick () > {console.log("上传文件")uni.chooseImage({success: (chooseImageRes) > {const tempFilePaths chooseImageRes.tempFilePaths;console.log("用户选择的图片：", temp…...
apache Kylin系列介绍及配置
Apache Kylin是一个开源的分布式分析引擎，用于OLAP（联机分析处理）数据处理。它专门设计用于处理大规模的数据集，并提供快速的查询和分析能力。 apache Kylin架构： Apache Kylin是一个开源的分布式分析引擎，旨在提供高性能、低延迟的OLAP（联机分析处理）能力。下面是Ap…...
【Qt 初识】QPushButton 的详解以及 Qt 中的坐标
文章目录 1. Qt 中的信号槽机制 🍎2. 通过图形化界面的方式实现 🍎3. 通过纯代码的方式实现按钮版的HelloWorld 🍎4. 设置坐标 🍎 1. Qt 中的信号槽机制 🍎 》🐧 本质就是给按钮的点击操作，关联…...
OpenClaw错误排查大全：Phi-3-vision-128k-instruct对接常见问题
OpenClaw错误排查大全：Phi-3-vision-128k-instruct对接常见问题 1. 问题背景与准备工具 上周在尝试用OpenClaw对接Phi-3-vision-128k-instruct模型时，我遇到了各种稀奇古怪的问题。从连接超时到图片解析失败，整个过程就像在玩技术版的"…...
避坑指南：当你的回归系数突然变号或不显著时，可能是多重共线性在捣鬼
回归模型中的多重共线性：从异常现象到实战解决方案 当你在分析电商用户行为数据时，突然发现"用户浏览时长"这个变量的回归系数从正变负，或者上周还显著的"促销活动参与次数"这周P值却变得不显著了——别急着怀疑人生&…...
OpenClaw性能调优：Qwen3-14B并发请求处理最佳实践
OpenClaw性能调优：Qwen3-14B并发请求处理最佳实践 1. 为什么需要性能调优？ 去年冬天，当我第一次在本地部署OpenClaw对接Qwen3-14B模型时，遇到了一个尴尬的问题——每当并发请求超过5个，系统就会开始出现响应延迟和任…...
OpenClaw+千问3.5-9B电商运营：自动生成商品详情与回复咨询
OpenClaw千问3.5-9B电商运营：自动生成商品详情与回复咨询 1. 为什么选择OpenClaw千问3.5-9B做电商自动化 去年双十一期间，我负责运营的个人店铺单日咨询量突破300条，手忙脚乱到凌晨三点还在回复客户问题。正是这段经历让我开始寻找自动化解…...
结构化编程
结构化编程：原理、UML建模与工程实践 1. 结构化编程概述 结构化编程（Structured Programming）是一种编程范式，其核心思想是使用有限的控制结构（顺序、选择、循环）和子程序（函数/过程）…...
车辆动力学模型：Carsim与Simulink联合仿真解析空间位姿及速度随时间变化的动态特征
车辆动力学模型，carsim&&simulink联仿，包括空间位姿、速度等随时间的变化踩下油门的瞬间轮胎与地面摩擦发出刺耳声响，方向盘在手里轻微抖动。这种肾上腺素飙升的操控体验，在CarSim和Simulink的联合仿真环境里只需要几行代…...
▲基于DQPSK调制解调+LDPC编译码+扩频解扩通信链路matlab误码率仿真
目录 1.本系统整体构架 2.各个模块基本原理 2.1 DQPSK原理简介 2.2 DQPSK解调原理 2.3 LDPC编译码 2.4 扩频技术原理 3.仿真结果 4.完整程序下载 1.本系统整体构架 整个程序，我们采用如下的流程图实现： 2.各个模块基本原理 2.1 DQPSK原理简介 …...
8086 汇编报错全总结与归纳
一、可能遇到的所有错误汇总错误代码错误含义触发行（你的代码）核心根源A2048Must be index or base registermov [ax],1H、add [dx],[ax]8086 硬件不支持用非BX通用寄存器做内存间接寻址A2035Operand must have sizemov [bx],1H汇编器无法判断操作数是 8…...
2026年，探秘义乌一次性包装盒定做厂家的独特工艺与优质服务！
在商品包装需求日益多样化的今天，一次性包装盒的定制市场愈发繁荣。义乌，作为全球知名的小商品之都，拥有众多一次性包装盒定做厂家，它们以独特的工艺和优质的服务在市场中占据一席之地。今天，我们将走进一家具有代表性…...
基于MPC的四旋翼高度动力学及X-Y平面位置控制设计的实践与仿真
基于MPC的四旋翼高度动力学以及x-y平面位置控制设计 简介：本项目侧重于MPC控制器设计，用于控制四旋翼的高度动力学以及x-y平面位置 就方向动力学而言，使用了定制的离散PID(DPID)控制器 该项目在MATLAB 2022b中进行了完全编码和仿真 此外&…...