Reines js, um einen Schreibmaschineneffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Code von js zur Erzielung des Schreibmaschineneffekts als Referenz angegeben. Der spezifische Inhalt ist wie folgt

Rendern

Anwendungsszenario

Es ist nicht sehr nützlich. Ich habe gerade einen ähnlichen Effekt im Internet gesehen und 40 oder 50 Zeilen Code geschrieben, den ich nicht verstehen konnte, also habe ich versucht herauszufinden, ob er einfach implementiert werden kann.

html

<h2 id="text-box"></h2>
<!--Eine Zeile ist auch Code-->
CSS

        h2 {
   Breite: 800px;
   Zeilenhöhe: 40px;
   Rahmen unten: 1px durchgezogen;
   Rand: 200px automatisch;
   Schriftgröße: 24px;
  }
  
  .animieren {
   Anzeige: Inline-Block;
   Polsterung: 0,5px;
   vertikale Ausrichtung: 3px;
   Schriftgröße: 20px;
   Schriftstärke: normal;
  }
  
  .animieren.auf {
   Animation: 1,5 s unendlich vorwärts überblenden;
  }
  
  @keyframes verblassen {
   aus {
    Deckkraft: 0;
   }
   Zu {
    Deckkraft: 1;
   }
  }

js

let textBox = $('#text-box');
lass Index = 0;
let str = 'Willkommen auf meiner Website!';
 
  lass len = str.length;
 
  Funktion input() {
 
   textBox.html(str.substr(0, index) + '<span class="animate">|</span>');
 
   setzeTimeout(Funktion() {
    Index++;
 
    wenn(index === länge + 1) {
     $('.animate').addClass('auf');
     zurückkehren;
    }
 
    Eingang();
 
   }, Math.random() * 600)
 
   konsole.log(index);
  }
 
  Eingang();

Umsetzungsprinzip

Der Timer wird mit der Zeichenfolgenabfangung kombiniert, um ein schreibmaschinenähnliches Frustrationsgefühl zu erzielen, und der Index wird durch Rekursion akkumuliert. Dies entspricht dem Abfangen eines Bytes in der ersten Sekunde, dem Abfangen von zwei Bytes in der zweiten Sekunde und so weiter. Der Timer nimmt eine Zufallszahl an, um das Pausengefühl beim Tippen besser zu simulieren. Fügen Sie dem rekursiven Aufruf eine Endschleifenbedingung hinzu und starten Sie die Animation vor dem Ende, um das Springen des Cursors zu simulieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.