Verwenden von Front-End-HTML+CSS+JS zum Entwickeln einer einfachen TODOLIST-Funktion (Notizblock)

Verwenden von Front-End-HTML+CSS+JS zum Entwickeln einer einfachen TODOLIST-Funktion (Notizblock)

1. Kurze Einführung

Nachdem der Blogger HTML, CSS und etwas JS gelernt hatte, nutzte er seine freie Zeit, um eine Demo über eine einfache JS-Anwendung zu schreiben. Die Hauptanwendung ist eine To-Do-Liste (ähnlich einem Notizblock), die Daten hinzufügen, löschen, ändern und abfragen kann und localStorage verwendet, um eine lokale dauerhafte Speicherung von Daten zu erreichen. Lesen Sie weiter, um Einzelheiten zu erfahren.

2. Screenshot ausführen

Bildbeschreibung hier einfügen

Geben Sie den Inhalt in das Eingabefeld ein:

Bildbeschreibung hier einfügen

Nach dem Hinzufügen wird es standardmäßig der Spalte „Unfertig“ hinzugefügt:

Bildbeschreibung hier einfügen

Ändern Sie die gerade hinzugefügten Elemente:

Bildbeschreibung hier einfügen

Änderung erfolgreich:

Bildbeschreibung hier einfügen

Setzen Sie die erfolgreich geänderten Elemente als abgeschlossen:

Bildbeschreibung hier einfügen

Streichen Sie „Essen“ und „Schlafen“:

Bildbeschreibung hier einfügen

3. Code-Einführung

Und nun ohne weitere Umschweife der Code:

HTML-Teil:

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel>Aufgabenliste</Titel>
		<link rel="stylesheet" type="text/css" href="index.css" rel="externes nofollow" />
	</Kopf>
	<Text>
		<!-- Kopfzeile -->
		<div id="Kopfzeile">
			<label class="text">Aufgabenliste</label>
			<input id="todo" class="head" type="text" placeholder="Bitte geben Sie Ihre Aufgaben ein">
			<button id="add" class="add" onclick="add()">Hinzufügen</button>
		</div>
		<!-- Inhalt -->
		<div id="Behälter">
			<h1 class="title">Unvollendet</h1>
			<span id="todocount"></span>
			<ol id="todolist">
			</ol>
			<h1 class="title">Abgeschlossen</h1>
			<span id="donecount"></span>
			<ol id="Erledigtliste">
			</ol>
		</div>
	</body>
	<script type="text/javascript" src="index.js"></script>
</html>

Es ist hauptsächlich in zwei Teile unterteilt, einer ist das Kopfzeilen-Eingabefeld und der andere ist der Inhaltsanzeigeteil. Todocount und Donecount geben die Anzahl der nicht abgeschlossenen und abgeschlossenen Elemente an, und die Liste zeigt bestimmte Elemente an. Standardmäßig gibt es kein solches Element, daher werden Elemente in js hinzugefügt und angezeigt.

CSS-Teil:

* {
	Rand: 0;
	Polsterung: 0;
}

Körper {
	Hintergrundfarbe: #b8c9ff;
}

#Kopfzeile {
	Rand: 0 automatisch;
	Schriftgröße: 50px;
	Breite: 700px;
	Textausrichtung: zentriert;
	Höhe: 150px;
}

.Titel {
	Anzeige: Inline-Flex;
}

.Kopf {
	-webkit-auftritt: keines;
	Rahmenradius: 25px;
	Breite: 500px;
	Höhe: 60px;
	Box-Schatten: 5px 5px 10px #556677;
	Rand: 1px durchgezogen #556677;
	Schriftgröße: 30px;
	Polsterung links: 25px;
	Umriss: 0;
	Rand: 0 automatisch;
	Anzeige: Inline-Flex;
}

.hinzufügen {
	Breite: 80px;
	Höhe: 50px;
	Rahmenradius: 25px;
	Umriss: 0;
	Rand: 1 durchgezogener Streifen Nr. 556677;
	schweben: rechts;
	Rand: 20px 0 0;
	Schriftgröße: 20px;
}

#Behälter {
	Rand: 0 automatisch;
	Breite: 700px;
	Höhe: 150px;
}

.del {
	Breite: 120px;
	Höhe: 70px;
	Rahmenradius: 25px;
	Umriss: 0;
	Rand: 1 durchgezogener Streifen Nr. 556677;
	Schriftgröße: 20px;
	Anzeige: Flex;
	Rand: 0 automatisch;
}

ol {
	Rand oben: 20px;
	Rand unten: 20px;
}

ol li {
	Breite: 600px;
	Höhe: 30px;
	Hintergrundfarbe: #fff;
	Listenstil: keiner;
	Textausrichtung: zentriert;
	Schriftgröße: 20px;
	Rahmenradius: 25px;
	Rand oben: 10px;
	Polsterung: 10px;
	Box-Schatten: 5px 5px 10px #556677;
}

ol li Spanne {
	schweben: links;
}

ol li-Taste {
	schweben: rechts;
	Breite: 70px;
	Höhe: 30px;
	Rand oben: 0px;
	Rand links: 10px;
	Rahmenradius: 25px;
	Box-Schatten: 5px 5px 10px #556677;
	Umriss: 0;
}

.del1 {
	Hintergrundfarbe: #f40;
	Rahmenradius: 25px;
	Breite: 50px;
	Höhe: 30px;
	Box-Schatten: 5px 5px 10px #556677;
	Umriss: 0;
}

.bearbeiten {
	Hintergrundfarbe: Königsblau;
	Rahmenradius: 25px;
	Breite: 50px;
	Höhe: 30px;
	Box-Schatten: 5px 5px 10px #556677;
	Umriss: 0;
	Farbe: #FFFFFF;
}

#Aufgabenzähler {
	Breite: 30px;
	Höhe: 30px;
	Hintergrundfarbe: #FFFFFF;
	Anzeige: Inline-Block;
	Randradius: 50 %;
	schweben: rechts;
	Schriftgröße: 1em;
	Rand oben: 10px;
	Textausrichtung: zentriert;
	Zeilenhöhe: 30px;
}

#fertigzählen {
	Breite: 30px;
	Höhe: 30px;
	Hintergrundfarbe: #FFFFFF;
	Anzeige: Inline-Block;
	Randradius: 50 %;
	schweben: rechts;
	Schriftgröße: 1em;
	Rand oben: 10px;
	Textausrichtung: zentriert;
	Zeilenhöhe: 30px;
}

Auf den CSS-Teil werde ich hier nicht näher eingehen. Der Blogger meint, er hat einen tollen Job gemacht. Wer das gemacht hat, kann es ja selbst optimieren.

JS-Teil:

window.addEventListener("load", load); //Rufen Sie die Ladefunktion auf, nachdem die Seite geladen wurde, d. h. die Seite initialisiert wurde. document.getElementById("todo").onkeypress = function (event) {
	if (event.keyCode === 13) {/*13 bedeutet, die Eingabetaste zu drücken*/
		hinzufügen(Ereignis);
	}
};
var todolist;//Globale Variablen definieren function load() { //Funktion zum Laden aller Elemente var todo = document.getElementById("todolist");//DOM-Element abrufen var done = document.getElementById("donelist");
	var todonum = document.getElementById("todocount");
	var donenum = document.getElementById("donecount");
	var todocontent = ""; //Setze den Anfangswert var donecontent = "";
	var todocount = 0;
	var donecount = 0;
	var list = localStorage.getItem("todolist"); //Lokale To-Do-Liste-Daten abrufen if (list != null) { //Wenn sie nicht leer sind todolist = JSON.parse(list); //JSON-Objekt in JS-Objekt umwandeln } else {
		todolist = []; // leer }
	wenn (To-Do-Liste != null) {
		for (var i = 0; i < todolist.length; i++) {//Durchlaufe die To-Do-Liste, die in ein JS-Objekt umgewandelt wurde
			if (todolist[i].done == false) {//done ist false, was bedeutet, dass es noch nicht abgeschlossen ist todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>Ändern</button>" + 
				 "<button click=" + "del(" + i + ") class='del1'>Löschen</button>" +
				"<button οnclick=" + "changedone(" + i + ")>Abschluss bestätigen</button>"
				 + "</li>"; //Zeichenfolge zur späteren Verwendung verketten todocount++; //Anzahl der nicht erledigten Elemente um eins erhöhen } else {
				erledigter Inhalt += "<li>" + "<span>" + Aufgabenliste[i].todo + "</span>" +  
				"<button οnclick=" + "edit(" + i + ") class='edit'>Ändern</button>" +
				"<button click=" + "del(" + i + ") class='del1'>Löschen</button>" + 
				"<button οnclick=" + "changetodo(" + i + ")>Abschluss abbrechen</button>"
				+ "</li>";
				donecount++; //Die Anzahl der abgeschlossenen Elemente plus eins }
		}
		todo.innerHTML = todocontent;//Fügen Sie Inhalt zum Tag hinzu, der durch todo dargestellt wird. done.innerHTML = donecontent;//Fügen Sie Inhalt zum Tag hinzu, der durch done dargestellt wird. todonum.innerHTML = todocount;//Fügen Sie Inhalt zum Tag hinzu, der durch todonum dargestellt wird. donenum.innerHTML = donecount;//Fügen Sie Inhalt zum Tag hinzu, der durch donenum dargestellt wird. } else { //Wenn die To-Do-Liste leer ist todo.innerHTML = "";
		fertig.innerHTML = "";
		todonum.innerHTML = 0;
		donenum.innerHTML = 0;
	}
}

function add(e) { //Funktion zum Hinzufügen von Elementen var newtodo = {
		todo: "", //Vom Benutzer eingegebener Inhalt done: false //done zeigt an, ob die Aufgabe abgeschlossen ist };
	var temp = document.getElementById("todo").value; //Verwenden Sie temp, um den Wert des Todo-Tags zu speichern if (temp.length == 0 && temp.trim() == "") { //Wenn die Eingabe leer ist alert('Das Eingabeelement darf nicht leer sein');
		zurückkehren;
	}
	var flag = confirm('Möchten Sie dieses Element wirklich hinzufügen?'); //Bestätigungsfeld öffnen if(flag){//Ja auswählen newtodo.todo = temp; //Den temporären Wert dem Todo-Attribut des Newtodo-Objekts zuweisen todolist.push(newtodo); //Ein Objekt zur Todolist hinzufügen document.getElementById("todo").value = ""; //Eingabefeld initialisieren save(); //Speichern alert('Erfolgreich hinzugefügt');
	}anders{
		alert('Operationsfehler');
		zurückkehren ;
	}
}

function changedone(i){ //Unerledigte Elemente in erledigte ändern var flag = confirm('Sind Sie sicher, dass Sie dieses Element erledigen möchten?');
	wenn(Flagge){
		todolist[i].done = true; //Den Erledigt-Status ändern save();
		alert('Änderung erfolgreich');
	}anders{
		alert('Operationsfehler');
		zurückkehren ;
	}
}

function changetodo(i){ //Abgeschlossene Elemente in nicht abgeschlossene ändern var flag = confirm('Sind Sie sicher, dass Sie die Aufgabe abbrechen möchten?');
	wenn(Flagge){
		todolist[i].done = false; //Den Erledigt-Status ändern save();
		alert('Änderung erfolgreich');
	}anders{
		alert('Operationsfehler');
		zurückkehren ;
	}
}

function edit(i) { //Den Inhalt des Elements ändern var temp = prompt("Bitte geben Sie den Inhalt ein, den Sie ändern möchten", todolist[i].todo); 
	if(temp != null && temp.trim() != ""){//Wenn der Inhalt nach der Änderung nicht leer ist todolist[i].todo = temp; //Inhalt ändern alert('Änderung erfolgreich');
		speichern();
	}anders{
		alert('Die Eingabezeichenfolge ist leer, die Änderung ist fehlgeschlagen');
	}
}

function del(i) { //Lösche das entsprechende Element var flag = confirm('Sind Sie sicher, dass Sie dieses Element löschen möchten?');
	wenn(Flagge){
		todolist.splice(i, 1); //Das angegebene Element löschen save();
		alert('Erfolgreich gelöscht');
	}anders{
		alert('Operationsfehler');
		zurückkehren ;
	}
}

function save(){ //Funktion zum Speichern von Elementen localStorage.setItem("todolist", JSON.stringify(todolist)); //JS-Objekt in JSON-Objekt umwandeln und lokal speichern load(); //Seite nach jedem Speichern aktualisieren}

Der Hauptzweck dieser Demo ist der js-Teil, daher sind die Kommentare im Code hier relativ umfassend und umfassen hauptsächlich mehrere Funktionen zum Hinzufügen, Löschen, Ändern und Überprüfen sowie einige Vorsichtsmaßnahmen bei der Initialisierung und die Verwendung persistenter Daten. Es ist zu beachten, dass der Inhalt nach jeder Änderung oder Hinzufügung gespeichert und neu geladen werden muss, da er sonst nicht rechtzeitig aktualisiert wird. Wenn Sie den Code hier direkt kopieren, kann es aufgrund unterschiedlicher Geräte zu Stilunterschieden kommen. Der Blogger hier hat keine geräteübergreifende Verarbeitung durchgeführt.

4. Zusammenfassung

Diese Demo ermöglichte es mir, den Großteil meines zuvor erworbenen Wissens anzuwenden und im Laufe der Übung auch einige vergessene Wissenspunkte zu wiederholen. Obwohl diese Demo nicht besonders perfekt war und ich dabei auf einige Informationssuchen gestoßen bin, habe ich insgesamt dennoch viel gelernt. Ich empfehle auch vielen Neulingen, die gerade erst anfangen, das Front-End zu lernen, rechtzeitig nach Abschluss der ersten Phase einige Demos durchzuführen. Schließlich ist Übung beim Programmieren wichtiger.

Dies ist das Ende dieses Artikels darüber, wie man mit HTML+CSS+JS eine einfache TODOLIST (Notizblock) erstellt. Weitere relevante Beispiele für To-Do-Listen-Operationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • JS implementiert einen einfachen TodoList-Effekt (Notizblock)
  • Natives JavaScript zur Implementierung der To-Do-Liste-Funktion
  • Vue.js To-Do-Liste Implementierungscode
  • JavaScript-Beispiel für eine ODO-Listenanalyse

<<:  Die neueste Version der MySQL5.7.19-Dekomprimierungsversion Installationshandbuch

>>:  Lösung für ungültige Nginx-Cross-Domain-Einstellung Access-Control-Allow-Origin

Artikel empfehlen

Nginx implementiert dynamische und statische Trennung Beispielerklärung

Um das Parsen der Website zu beschleunigen, könne...

Detaillierte Interpretation der Datei /etc/fstab im Linux-System

Vorwort [root@localhost ~]# cat /etc/fstab # # /e...

Detaillierte Erläuterung des automatischen Füllschreibens von CSS3-Flexboxen

In diesem Artikel wird hauptsächlich die Methode ...

Einfaches Tutorial zu den Firewall-Einstellungen unter Ubuntu 20.04 (Anfänger)

Vorwort In der heutigen, immer bequemeren Interne...

So verbinden Sie Django 2.2 mit einer MySQL-Datenbank

1. Beim Ausführen des Projekts werden folgende Fe...

Ausführliche Erklärung der Closure in JavaScript

Einführung Closure ist eine sehr leistungsstarke ...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

Detaillierte Erklärung zum Problem der CSS-Klassennamen

Die folgenden CSS-Klassennamen, die mit einer Zah...

Wie der Linux-Kernel in den Prozessadressraum eindringt und den Prozessspeicher ändert

Die Isolierung von Prozessadressräumen ist ein be...

Eine umfassende Zusammenfassung häufig verwendeter Anweisungen in MySQL (unbedingt lesen)

Die unten zusammengefassten Wissenspunkte werden ...

Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18

In Bezug auf die Verbindungsmethode zwischen Java...

Vollständige Analyse des MySQL INT-Typs

Vorwort: Integer ist einer der am häufigsten verw...

So legen Sie den Standardwert für den Datums-/Uhrzeittyp in MySQL fest

Beim Ändern des Standarddatums-/Uhrzeitwerts über...

Grafisches Tutorial zur Installation von MySQL 5.7.17 (Windows)

Ich habe vor Kurzem mit dem Studium der Datenbank...

Die MySQL-Partitionstabelle ist nach Monaten klassifiziert

Inhaltsverzeichnis Erstellen einer Tabelle Zeigen...