当前位置：首页 > news >正文

如何做网站帮别人赚钱凡科网站建设

news 2025/7/31 8:29:40

如何做网站帮别人赚钱,凡科网站建设,网站开发是做什么,如何制作个人网页文档开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~ 此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面…

开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~

此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。

同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。

但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。

最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！

页面效果：多种颜色搭配的动态粒子背景特效（粒子会随着鼠标的移动进行吸附，好看又好玩），左右摆动的文字特效，记事本的内容也可以长期的保存在浏览器中

一：留言板.`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); // 重新渲染留言列表}});