526互联

前端项目-记事本制作

发布时间 2023-08-04 19:35:28作者: aondw

效果预览：

夜间模式：

日间模式：

应用的主要功能：

  • 记事功能：你可以在文本框中输入你的笔记，然后点击“保存”按钮，你的笔记就会被保存下来。你可以随时查看和删除你的笔记。
  • 夜间模式：我们的应用支持夜间模式，你可以点击“切换模式”按钮来切换夜间模式和日间模式。夜间模式有助于在光线较暗的环境中保护你的眼睛。
  • 自定义背景：你可以选择一张图片作为应用的背景。只需要点击“选择背景”按钮，然后选择你喜欢的图片，这个图片就会被设置为背景。我们还提供了一个半透明的覆盖层，可以让背景图片变得更加柔和。
  • 响应式设计：我们的应用使用了响应式设计，这意味着它可以在任何设备上正常工作，无论是桌面电脑、笔记本电脑、平板电脑还是手机。
  • 本地存储：我们的应用使用了本地存储技术，这意味着你的笔记、模式选择和背景图片都会被保存在你的设备上，即使你关闭了浏览器或者重启了设备，你的设置和笔记也不会丢失。

代码解析：

        body, textarea {
            font-family: 'Arial Rounded MT', Arial, sans-serif;
            padding: 20px;
            background: white;
            background: linear-gradient(to right, white, #f3f3f8);
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #333;
            font-size: 18px;
            line-height: 1.6;
            transition: background 0.5s, color 0.5s;
            opacity: 0;
            animation: fadeIn 2s ease-in forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        body.night {
            background: #333;
            background: linear-gradient(to right, #333, #555);
            color: #ddd;
        }

        textarea {
            width: 80%;
            height: 100px;
            padding: 15px;
            box-sizing: border-box;
            margin-bottom: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            resize: none;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            transition: background 0.5s, border 0.5s;
        }

        body.night textarea {
            background-color: #555;
            border-color: #888;
            color: #ddd;
        }

        button {
            display: block;
            width: 100px;
            margin: 20px auto;
            padding: 10px;
            font-size: 18px;
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s;
        }

        button:hover {
            transform: scale(1.1);
        }

        body.night button {
            color: #ddd;
        }

        #savedNotes {
            font-size: 16px;
            color: #333;
            width: 80%;
            transition: color 0.5s;
        }

        body.night #savedNotes {
            color: #ddd;
        }

        .note {
            position: relative;
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            transition: border 0.5s;
        }

        body.night .note {
            border-color: #888;
        }

        .deleteButton {
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            opacity: 0.7;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
# 鼠标放在哪里的时候，不透明度设置为1
        .deleteButton:hover {
            opacity: 1;
        }
# 夜间模式删除按钮的颜色设置
        body.night .deleteButton {
            color: #ddd;
        }
# 切换夜间、白天模式的按钮
        #modeSwitch {
            position: fixed;
            top: 20px;
            right: 20px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 12px;
            transition: background-color 0.5s, color 0.5s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.night #modeSwitch {
            background-color: #555;
            color: #ddd;
        }

        @media (max-width: 600px) {
            textarea, #savedNotes {
                width: 100%;
            }
        }
        #backgroundInput {
            display: none;
        }
# 这部分是初始及选择图片后背景的设计：
        #backgroundLabel {
            position: fixed;
            top: 20px;
            left: 20px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 12px;
            transition: background-color 0.5s, color 0.5s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.night #backgroundLabel {
            background-color: #555;
            color: #ddd;
        }
# 这部分是覆盖图层用于柔滑背景图片的代码：
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.5);
            z-index: -1;
        }

        body.night::before {
            background: rgba(0, 0, 0, 0.5);
        }

<body>
    <textarea id="noteText" rows="10" cols="30"></textarea>
    <button id="saveButton">保存</button>
    <div id="savedNotes"></div>
    <button id="modeSwitch">切换模式</button>
    <input type="file" id="backgroundInput" accept="image/*">
    <label for="backgroundInput" id="backgroundLabel">选择背景</label>
    <script>
# 采用Json parse来进行数据的存储及读取。
        var notes = JSON.parse(localStorage.getItem('notes')) || [];
        var nightMode = localStorage.getItem('nightMode') === 'true';
        var backgroundImage = localStorage.getItem('backgroundImage');
# 显示出来所有的已经保存的记事本内容
        // Display all saved notes
        document.getElementById('savedNotes').innerHTML = notes.map(function(note, index) {
            return '<div class="note"><p>' + note + '</p><button class="deleteButton" data-index="' + index + '">X</button></div>';
        }).join('');

        document.getElementById('saveButton').addEventListener('click', function() {
            var noteText = document.getElementById('noteText').value;
            notes.push(noteText);
            localStorage.setItem('notes', JSON.stringify(notes));
            document.getElementById('savedNotes').innerHTML += '<div class="note"><p>' + noteText + '</p><button class="deleteButton" data-index="' + (notes.length - 1) + '">X</button></div>';
            document.getElementById('noteText').value = '';
        });

        document.getElementById('savedNotes').addEventListener('click', function(e) {
            if(e.target.className === 'deleteButton') {
                var index = e.target.getAttribute('data-index');
                notes.splice(index, 1);
                localStorage.setItem('notes', JSON.stringify(notes));
                e.target.parentElement.remove();
            }
        });

        document.getElementById('modeSwitch').addEventListener('click', function() {
            nightMode = !nightMode;
            localStorage.setItem('nightMode', nightMode);
            document.body.className = nightMode ? 'night' : '';
        });

        document.getElementById('backgroundInput').addEventListener('change', function(e) {
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onloadend = function() {
                document.body.style.backgroundImage = 'url(' + reader.result + ')';
                localStorage.setItem('backgroundImage', reader.result);
            }
            if (file) {
                reader.readAsDataURL(file);
            } else {
                document.body.style.backgroundImage = '';
            }
        });

        // Set initial mode and background
        document.body.className = nightMode ? 'night' : '';
        if (backgroundImage) {
            document.body.style.backgroundImage = 'url(' + backgroundImage + ')';
        }
    </script>
</body>