实现h5、css3便签列表如下所示,要求第一次打开便签页面时,判断localStorage是否存储有便签数据,便签本地存储可以认为存储在localStorage['note'],若localStorage['note']没有数据先通过js将便签数组数据存储到localStorage['note'],若存在数据,则从localStorage取出数据渲染到页面上,通过nth-child选择器实现对便签的背景色和字体颜色控制,标签有旋转、阴影效果,并且鼠标箭头移上便签时有相应放大过渡显示效果
时间: 2024-02-25 22:57:10 浏览: 169
好的,这是一个关于前端开发的问题。让我来解答一下。
首先,我们需要在页面加载的时候判断 localStorage 是否存储了便签数据。可以使用下面的代码来实现:
```javascript
let notes = [];
if (localStorage.getItem('note')) {
notes = JSON.parse(localStorage.getItem('note'));
} else {
localStorage.setItem('note', JSON.stringify(notes));
}
```
如果 localStorage 中没有存储便签数据,我们就定义一个空数组来存储便签数据,并将其存储到 localStorage 中。
接下来,我们需要将便签数据渲染到页面上。可以使用下面的代码来实现:
```javascript
const noteList = document.querySelector('.note-list');
notes.forEach((note, index) => {
const noteItem = document.createElement('li');
noteItem.textContent = note;
noteItem.dataset.index = index + 1;
noteList.appendChild(noteItem);
});
```
这段代码会遍历便签数组,创建一个 li 元素来显示每一个便签,并将其添加到便签列表中。注意,我们使用了 `dataset` 属性来存储便签的索引。
接下来,我们需要使用 CSS 来实现便签的样式。可以使用下面的代码来实现:
```css
.note-list li:nth-child(2n) {
background-color: #f5f5f5;
}
.note-list li {
position: relative;
margin: 10px 0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
transform: rotate(-2deg);
transition: all 0.2s;
}
.note-list li:hover {
transform: scale(1.1) rotate(-4deg);
z-index: 1;
}
```
这段代码会对便签列表中的每一个偶数项设置背景色,对每一个 li 元素设置样式,包括边框、圆角、阴影、旋转等特效。当鼠标移动到便签上时,会有一个放大过渡效果。
最后,我们需要使用 JavaScript 来实现添加、删除便签的功能。可以使用下面的代码来实现:
```javascript
const noteForm = document.querySelector('.note-form');
const noteInput = document.querySelector('.note-input');
noteForm.addEventListener('submit', (event) => {
event.preventDefault();
const note = noteInput.value.trim();
if (note === '') return;
notes.push(note);
localStorage.setItem('note', JSON.stringify(notes));
const noteItem = document.createElement('li');
noteItem.textContent = note;
noteItem.dataset.index = notes.length;
noteList.appendChild(noteItem);
noteInput.value = '';
});
noteList.addEventListener('click', (event) => {
if (event.target.tagName.toLowerCase() === 'li') {
const index = event.target.dataset.index;
notes.splice(index - 1, 1);
localStorage.setItem('note', JSON.stringify(notes));
noteList.removeChild(event.target);
updateNoteIndex();
}
});
function updateNoteIndex() {
const noteItems = document.querySelectorAll('.note-list li');
noteItems.forEach((noteItem, index) => {
noteItem.dataset.index = index + 1;
});
}
```
这段代码会监听表单的提交事件,当用户输入便签内容并提交后,会将便签保存到数组中,并将数组存储到 localStorage 中。同时,会在便签列表中添加一个新的 li 元素来显示新的便签内容。
另外,我们还监听了便签列表的点击事件,当用户点击某一个便签时,会将该便签从数组和 localStorage 中删除,并从便签列表中移除该便签。注意,我们还编写了一个函数来更新便签的索引,以保证其与数组中的索引相对应。
综上所述,以上就是实现 h5、css3 便签列表的完整代码。
阅读全文