前端网站（三）-- 记事本【附源码】
开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~
此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。
但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！
页面效果：多种颜色搭配的动态粒子背景特效（粒子会随着鼠标的移动进行吸附，好看又好玩），左右摆动的文字特效，记事本的内容也可以长期的保存在浏览器中
一：留言板.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 中的信号槽机制 🍎 》🐧 本质就是给按钮的点击操作，关联…...
道路运输企业管理人员安全考核试题（附答案）
1、【多选题】《道路旅客运输企业安全管理规范》规定，客运企业应当制定车辆动态监控操作规程。操作规程的内容包括( )。(ABCD) A、卫星定位装置、视频监控装置、动态监控平台设备的检修和维护要求 B、动态监控信息采集、分析、处理规范和流程 C、违法违规信息统…...
免费开源的工业物联网（IoT）解决方案
什么是 IoT？ 物联网 (IoT) 是指由实体设备、车辆、电器和其他实体对象组成的网络，这些实体对象内嵌传感器、软件和网络连接，可以收集和共享数据。 IoT 设备（也称为“智能对象”）范围广泛，包括智能恒温器等…...
Android 底部导航栏实现
依赖库 implementation "androidx.viewpager2:viewpager2:1.0.0" fragment基类 /*** Fragment的基类** param <DB> data binding* param <VM> view model* author shizhiyin*/ public abstract class BaseFragment<DB extends ViewDataBinding, VM …...
ASP.NET Core----基础学习07----ViewStart ViewImports文件的使用
文章目录 1._ViewStart.cshtml的使用2.更换Layout文件3._ViewImports.cshtml文件的使用 1._ViewStart.cshtml的使用 step1： 在Views文件夹下面创建_ViewStart.cshtml文件 step2： 删掉视图文件中的Layout设置行 step3： 最终显示效果ÿ…...
铁威马教程丨如何收集NAS的日志
适用版本: 适用于TOS 5.0.xxx、TOS5.1.xxx版本。 适用机型： TNAS型号（除F2-210、F4-210） 故障现象： 当TNAS宕机导致网页不可访问且PC无法搜索到该设备时，重启后TOS网页的系统报告缺失相关日志，不利于异常…...
Taro自定义FromData实现本地路径转换为文件
在用Taro写头像上传功能时，因为需要对获得的图片进行剪切成圆形或方形。使用组件剪切完之后返回的是一个本地图片的相对路径。这个时候我们就需要自己实现将本地路径重新转换为二进制文件。 引入两个js文件 mimeMap.js module.exports {"0.001": &quo…...
React+TS前台项目实战（二十九）-- 首页构建之性能优化实现首页Echarts模块数据渲染
文章目录 前言Echart模块源码功能分析数据渲染一、HashRateEchart统计图1. 功能分析2. 代码详细注释 二、BlockTimeChart统计图1. 功能分析2. 代码详细注释 三、使用方式四. 数据渲染后效果如下 总结 前言 还记得之前我们创建的 高性能可配置Echarts组件 吗？今天我…...
接口测试返回参数的自动化对比！
引言 在现代软件开发过程中，接口测试是验证系统功能正确性和稳定性的核心环节。接口返回参数的对比不仅是确保接口功能实现的手段，也是测试过程中常见且重要的任务。为了提高对比的效率和准确性，我们可以通过自动化手段实现这一过程。本文将…...
React基础学习-Day02
React基础学习-Day02 1.受控表单绑定 在 React 中，受控表单（controlled form）是一种通过 React 组件状态（state）来管理表单元素值的方式。使用受控表单，可以将表单元素的值与 React 组件的状态保持同步&a…...
切换网页visibilitychange，的升级版实现
目录 1 需求场景 2 用到的技术 3 日常检测方法 4 一个有意思的场景 5 升级版实现一 5.1 新建 /utils/browser.js 5.2 项目业务组件中使用 6 升级版实现二 6.1 安装js-tool-big-box工具库 6.2 引入 browserBox 对象 6.3 以控制累加定时器为例 6.4 查看定时器效果 1…...