前端网站（三）-- 记事本【附源码】
开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~
此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。
但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！
页面效果：多种颜色搭配的动态粒子背景特效（粒子会随着鼠标的移动进行吸附，好看又好玩），左右摆动的文字特效，记事本的内容也可以长期的保存在浏览器中
一：留言板.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 中的信号槽机制 🍎 》🐧 本质就是给按钮的点击操作，关联…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...