前端网站（三）-- 记事本【附源码】

温轻舟

于 2024-07-15 21:35:55 发布

阅读量459

点赞数 14

分类专栏： web前端项目-源码自取文章标签：前端 css html javascript

本文链接：https://blog.csdn.net/qiao_yue/article/details/140449706

版权

web前端项目-源码自取专栏收录该内容

26 篇文章 17 订阅

订阅专栏

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

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

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

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

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

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

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

});