Ausführliche Erklärung zur Implementierung des Schreibmaschinen-Plugins im Frontend

Dieser Artikel vermittelt Ihnen relevantes Wissen über das Frontend. Es geht hauptsächlich darum, wie das Frontend das Schreibmaschinen-Plugin implementiert. Ich hoffe, dass es für alle hilfreich ist.

Vorwort

Das Front-End realisiert den Schreibmaschineneffekt. Die im Internet gefundene Methode kann nicht endübergreifend verwendet werden. In Anbetracht des Cross-End-Problems wird eine Kompatibilitätslösung gefunden: Verwenden Sie a Rückruffunktion und rufen Sie den Rückruf jedes Mal auf, wenn sich die Eingabe ändert, und werfen Sie die aktualisierte Zeichenfolge aus, sodass Benutzer das anschließende Rendern selbst durchführen können, sodass sie plattformübergreifend und normal auf allen Terminals verwendet werden kann.

Die einfachste Schreibmaschine

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
    if (index <p>Die einfachste Schreibmaschine, einfach Text über einen Timer hinzufügen. Durch dieses Beispiel können wir eine konkrete Implementierungsidee erhalten, natürlich sind noch einige Funktions- oder Leistungsprobleme erforderlich kontinuierlich optimiert werden, aber wir können auf dieser Grundlage ein Plug-in entwerfen. </p><h2 id="Rückwärtslöschanimation-hinzugefügt">1. Rückwärtslöschanimation hinzugefügt</h2><p>Also fügen wir einen aktuellen Tippstatus hinzu</p><p>Wenn der Status „Tippen“ ist, bedeutet dies Vorwärtstippen, andernfalls bedeutet es Rückwärtslöschen. </p><p>Dann verarbeiten wir den Löschteil. Die Logik davon Teil ist derselbe wie beim Hinzufügen vorwärts, und wir müssen auch den Status auf „Eingeben“ ändern, nachdem wir das letzte Zeichen gelöscht haben</p><h2 id="Die-Geschwindigkeit-des-Hinzufügens-und-Löschens-rückwärts-ist-steuerbar">2 Die Geschwindigkeit des Hinzufügens und Löschens rückwärts ist steuerbar</h2><p> Dann können Sie auch die Geschwindigkeit anpassen Vorwärts hinzufügen oder rückwärts löschen, was anhand des aktuellen Status beurteilt werden kann</p><h2 id="Der-Eingabetext-kann-eine-einzelne-Zeichenfolge-oder-ein-Array-von-Zeichenfolgen-sein-und-unterstützt-die-Übergabe-einer-Zeichenfolge-Ein-Array-anstelle-einer-einzelnen-Zeichenfolge-da-die-tatsächliche-Die-Anforderung-besteht-möglicherweise-darin-zwischen-mehreren-Zeichenfolgen-zu-wechseln-Zunächst-muss-nichts-über-die-Logik-eines-einzelnen-Zeichens-gesagt-werden">3 Der Eingabetext kann eine einzelne Zeichenfolge oder ein Array von Zeichenfolgen sein und unterstützt die Übergabe einer Zeichenfolge. Ein Array anstelle einer einzelnen Zeichenfolge, da die tatsächliche Die Anforderung besteht möglicherweise darin, zwischen mehreren Zeichenfolgen zu wechseln. Zunächst muss nichts über die Logik eines einzelnen Zeichens gesagt werden. </h2><p>Über die Funktion „changeTextIndex“ kann die aktuelle Zeichenfolge kontinuierlich aktualisiert werden, um den Effekt einer Schleife des Zeichenfolgenarrays zu erzielen. </p><p>4. Aktivieren Sie die Verzögerung. Fügen Sie eine Verzögerung zwischen dem Anfang und dem Ende der Zeichenfolge hinzu Wartezeit nach jeder Schreibsitzung</p><p>Wenn die Schreibmaschine zu lange läuft, muss sie ausgeschaltet werden, wenn sie nicht verwendet wird Wenn beispielsweise eine Schreibmaschine auf der Startseite instanziiert ist, die Schreibmaschine jedoch bei der Eingabe anderer Seiten nicht mehr benötigt wird, muss sie gestoppt werden. </p><h2 id="Binden-Sie-eine-Funktion-an-die-Instanz-um-die-aktuelle-Schreibmaschine-zu-stoppen-Beim-Aufruf-wird-dem-nächsten-Timer-Null-zugewiesen-wodurch-die-Schreibmaschine-gestoppt-wird">Binden Sie eine Funktion an die Instanz, um die aktuelle Schreibmaschine zu stoppen. Beim Aufruf wird dem nächsten Timer Null zugewiesen, wodurch die Schreibmaschine gestoppt wird. </h2><p>6. Verwenden Sie Rückrufe, um Miniprogrammprobleme zu lösen. </p><p>Im obigen Code haben wir den Dom-Knoten geändert, um die Schreibmaschinenzeichen zu ändern. Im Miniprogramm oder in anderen APIs, die kein Dom oder keine Dom-Änderung haben, wird dies nicht der Fall sein längere Arbeit Wenn es innerhtml ist, kann das Plug-in es nicht unterstützen, daher ist es damit kompatibel. Die aktuelle Zeichenfolge wird über callBackText gespeichert und dann wird eine Funktion verwendet, um zu bestimmen, wie diese Zeichenfolge verwendet werden soll</p><h2 id="Wenn-ein-Rückruf-erfolgt-Priorisieren-Sie-den-Zeichenfolgenrückruf-durch-den-Rückruf-lassen-Sie-das-Unternehmen-die-Zeichenfolge-abrufen-und-die-Änderungslogik-selbst-verarbeiten-sodass-der-Tippeffekt-überall-erzielt-werden-kann-und-nicht-mehr-von-der-Umgebung-abhängt">Wenn ein Rückruf erfolgt Priorisieren Sie den Zeichenfolgenrückruf durch den Rückruf, lassen Sie das Unternehmen die Zeichenfolge abrufen und die Änderungslogik selbst verarbeiten, sodass der Tippeffekt überall erzielt werden kann und nicht mehr von der Umgebung abhängt. </h2><p>Hier ist ein Beispiel meines eigenen Uniapp-Projekts</p><p></p><h2 data-id="heading-8"></h2><p></p><p>Effekt: </p><p></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/a4e713f7104ede389fda47b0c65e7107-1.png" class="lazy" alt="Ausführliche Erklärung zur Implementierung des Schreibmaschinen-Plugins im Frontend" loading="lazy">Typed.js-Bibliothek eines Drittanbieters</p><p>Der größte Teil der Logik bezieht sich speziell auf <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/020/924bcf309a473f761e178442d2a375be-2.png" class="lazy" alt="Ausführliche Erklärung zur Implementierung des Schreibmaschinen-Plugins im Frontend" loading="lazy">[typed.js]-JavaScript Eingabe der Animationsbibliothek</p><p></p><p>Dies ist ein angepasstes Plug-in. Die unterstützten Funktionen sind nicht so gut wie typed.js, aber es ist leichter und kann mehr Funktionen definieren, die Sie benötigen. </p><h2 id="Zusammenfassung">Zusammenfassung</h2><p> Ohne Berücksichtigung der Umgebung besteht der einfachste Schreibmaschineneffekt darin, den Timer direkt zu verwenden, um den Knoteninhaltstext nach einer bestimmten Zeit zu aktualisieren. Auf dieser Basis kann er auch erweitert werden, um eine vollständigere Schreibmaschine zu aktualisieren. in.</p><p>Empfohlenes Lernen: „<a href="https://www.php.cn/course/list/1.html" target="_blank">Web-Front-End-Entwicklung</a>“</p>

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung des Schreibmaschinen-Plugins im Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!