您的专属记事本 | HTML页面

在这里写下你的故事吧，让那些平凡日子里的小确幸在时间长河中慢慢舒展，编织出属于自己的璀璨星河

您的专属记事本 | HTML页面

效果展示

源码分享

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, // 或者使用 "rgba(" + d.c + "," + (t + 0.2) + ")" 保持原样                  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; /* 垂直居中（对于单行内容） */    /*min-height: 100vh; !* 确保body至少占据整个视口高度 *!*/    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); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);            }            20% {                 transform: rotate(-2deg); -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg);            }            60% {                 transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);            }            80% {                 transform: rotate(2deg); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg);            }            100% {                 transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);            }        }

JavaScript代码

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 = ''; // 清空输入框        }    });    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); // 重新渲染留言列表    }});

项目分析

功能描述