Я хочу добавить кнопку сброса на веб -сайт ниже, которая вернет веб -страницу в его начальное состояние. Может ли кто -нибудь помочь мне с этим? < /P>
Заранее. < /P>
body {
margin: 0;
background: #000000;
}
div.removable {
color: #ffffff;
font-size: 25px;
font-family: Arial;
padding: 12px 8px 12px 10px;
cursor: pointer;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
position: fixed;
top: 10px; /* Pas deze waarde aan om de verticale positie te bepalen */
right: 10px; /* Pas deze waarde aan om de horizontale positie te bepalen */
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
z-index: 1000; /* Zorg ervoor dat de knop boven andere elementen ligt */
}
Task 1
Task 2
Task 3
Undo
const removalHistory = []; // Array om verwijderde elementen en hun posities op te slaan
const listContainer = document.body; // De container van de verwijderbare elementen
// Functie om de huidige staat van de lijst op te slaan in Local Storage
function saveListState() {
const remainingItems = Array.from(document.querySelectorAll('.removable')).map(item => item.textContent);
localStorage.setItem('todoListState', JSON.stringify(remainingItems));
}
// Functie om de opgeslagen staat van de lijst te laden
function loadListState() {
const savedState = localStorage.getItem('todoListState');
if (savedState) {
const items = JSON.parse(savedState);
// Verwijder alle bestaande items
document.querySelectorAll('.removable').forEach(item => item.remove());
// Voeg de opgeslagen items opnieuw toe
items.forEach(text => {
const newDiv = document.createElement('div');
newDiv.className = 'removable';
newDiv.textContent = text;
newDiv.onclick = function() { removeElement(this); };
listContainer.insertBefore(newDiv, document.getElementById('undoButton'));
});
// Reset de undo geschiedenis omdat de pagina opnieuw is geladen
removalHistory.length = 0;
document.getElementById('undoButton').disabled = true;
}
}
function removeElement(el) {
removalHistory.push({
element: el,
previousSibling: el.previousElementSibling
});
el.remove();
document.getElementById('undoButton').disabled = false;
saveListState(); // Sla de staat op na een verwijdering
}
function undoLastRemoval() {
if (removalHistory.length > 0) {
const lastRemoval = removalHistory.pop(); // Haal de laatste verwijdering uit de geschiedenis
const elementToRestore = lastRemoval.element;
const previousSibling = lastRemoval.previousSibling;
if (previousSibling) {
previousSibling.insertAdjacentElement('afterend', elementToRestore);
} else {
listContainer.insertBefore(elementToRestore, listContainer.firstChild);
}
// Schakel de undo knop uit als er geen verwijderingen meer zijn om ongedaan te maken
document.getElementById('undoButton').disabled = removalHistory.length === 0;
saveListState(); // Sla de staat op na een undo
}
}
// Laad de opgeslagen staat wanneer de pagina geladen is
window.onload = loadListState;
Подробнее здесь: https://stackoverflow.com/questions/796 ... ed-to-loca
