高端网站建设wanghess,网页制作教程教案,新手学做免费网站,wordpress消息推送开篇#xff08;请大家看完#xff09;#xff1a;此网站写给挚爱#xff0c;后续页面还会慢慢更新#xff0c;大家敬请期待~ ~ ~
此前端框架#xff0c;主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意#xff0c;精心打造了一系列引人入胜的页面…开篇请大家看完此网站写给挚爱后续页面还会慢慢更新大家敬请期待~ ~ ~
此前端框架主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意精心打造了一系列引人入胜的页面特效会为大家带来全新的浏览体验。
同时我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好对框架进行个性化的定制和扩展以打造出更符合自己品味的页面效果。
但请注意如果您打算将这个框架转发给其他人或用于其他场合请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后轻舟会继续更新和完善这个前端页面特效框架为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注 页面效果多种颜色搭配的动态粒子背景特效粒子会随着鼠标的移动进行吸附好看又好玩左右摆动的文字特效记事本的内容也可以长期的保存在浏览器中 一留言板.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title私人留言板/titlelink relstylesheet hrefCSS/留言板.css
/head
body
h1专属记事薄/h1div classcontainerform idmessageFormtextarea idmessageInput placeholder请输入你的留言... stylecolor: #dc6515/textareabutton typesubmit提交留言/buttonbutton idsubmitButton显示留言/button/formdiv idmessages!-- 留言 --/div/divscript srcJS/留言板.js/scriptscript!(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); // 重新渲染留言列表}});注意 本页面就到这里啦~ ~ ~源码复制粘贴直接可用期待一下下一个页面功能叭
