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