Kürzlich habe ich ein Thema in der Gruppe gesehen und es herausgenommen und es geschrieben.
Erfordern:
Verwenden Sie HTML, CSS und Native JS, um den in der Abbildung gezeigten Effekt zu erzielen, zuerst nach vorne auszugeben, dann rückwärts zurückzukehren, und bleiben Sie schließlich im gesamten Bild.
Erste:
HTML -Teilcode:
<div id = "result"> </div>
Es ist einfach so einfach.
CSS -Code:
#Result {Breite: 550px; Rand: 30px Auto; Schriftgröße: 0; Schriftfamilie: Konsolas, "Befreiungsmono", Menlo, Kurier, Monospace;}#Ergebnisspanne {Anzeige: Inline-Block; Breite: 60px; Höhe: 25px; Zeilenhöhe: 25px; Schriftgröße: 12px; Text-Align: Mitte; Grenze: 1PX Solid #eee; Rand: -1px 0 0 -1px;}Der CSS -Code ist ebenfalls sehr einfach. Der Rand in der Spanne dient hauptsächlich, um das Problem der Doppelgrenzen zu beseitigen.
Der nächste Schlüsselpunkt ist
JavaScript -Code:
Erstellen Sie zuerst eine Funktion mit einer 9*9 -Multiplikationstabelle
Funktion create () {var html = []; für (var i = 1; i <= 9; i ++) {für (var j = 1; j <= i; j ++) {html.push ('<span>'+j+'*'+i+'='+(j*i)+'</span>'); } html.push ('<br/>'); } return html;}1. Erstellen Sie ein neues leeres Array, um HTML -Code -Snippets einzustellen:
var html = [];
2. Verwenden Sie A für die Schleife, um die 9*9 -Multiplikationstabelle zu durchqueren:
für (var i = 1; i <= 9; i ++) {für (var j = 1; j <= i; j ++) {// Inhalt}}3. Drücken Sie den Schleifeninhalt in das leere Array, das neu erstellt wurde:
html.push ('<span>'+j+'*'+i+'='+(j*i)+'</span>');4. Beachten Sie, dass nach Abschluss der J -Schleife ein Newline -Charakter hinzugefügt wird, um die Leiter implementieren zu können:
html.push ('<br/>');5. Denken Sie schließlich daran, das Array gerade zurückzugeben:
Rückgabe html;
Die Funktion, die eine 9*9 -Multiplikationstabelle erstellt, ist abgeschlossen.
Als nächstes wird auf der Seite angezeigt:
function inhtml () {var html = create (), i = 0, tmp = create (), timer = null, result = document.getElementById ('result'); timer = setInterval(function(){ if(i > html.length){ html.splice(html.length-1,1) result.innerHTML = html.join(''); } else{ result.innerHTML += html[i++]; } if(!html.length){ result.innerHTML = tmp.join ('');Wir erstellen immer noch eine neue Funktion: inhtml ()
1. Deklarieren Sie zuerst einige Initialisierungsvariablen
var html = create (), // Aufrufen der 9*9 -Funktion i = 0, // initialisieren
2. Dann erstellen wir einen Timer, um die Daten nacheinander anzuzeigen:
timer = setInterval (function () {// content}, 100)Lassen Sie diesen Timer einmal in 100 Millisekunden ausgeführt werden
3. Schreiben Sie dann den Inhalt in den Timer:
if (i> html.length) {// urteilen, ob ich größer als html.length ist. Wenn es größer ist als, anzeigen Sie html.splice (html.length-1,1) result.innerhtml = html.join ('');} else {// Wenn es kleiner ist, display-result.innnerhtml+= html [i ++]; result.innerhtml = tmp.join (''); ClearInterval (Timer); // Timer löschen}Die inhtml () -Funktion wurde ebenfalls geschrieben, daher ist das einzige, was noch übrig ist, es zu nennen
inhtml ();
Beenden.
Sie können es selbst ausprobieren. Wenn Sie bessere Ideen haben, hinterlassen Sie mir bitte eine Nachricht.
Der obige dynamische Implementierungscode des 9*9 -Multiplikationstabelleneffekts ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.