Pure js se da cuenta del efecto de máquina de escribir

Imagen de efecto

Escenarios de aplicación

No es muy útil. Acabo de ver un efecto similar en Internet. Escribí 40 o 50 líneas de código que no entendía, así que traté de hacerlo simple.

html

<h2 id="text-box"></h2>
<!--一行也是代码-->

css

        h2 {
			width: 800px;
			line-height: 40px;
			border-bottom: 1px solid;
			margin: 200px auto;
			font-size: 24px;
		}
		
		.animate {
			display: inline-block;
			padding: 0 5px;
			vertical-align: 3px;
			font-size: 20px;
			font-weight: normal;
		}
		
		.animate.on {
			animation: fade 1.5s infinite forwards;
		}
		
		@keyframes fade {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}

js

		let textBox = $('#text-box');
		let index = 0;
		let str = 'Welcome to my website!';

		let len = str.length;

		function input() {

			textBox.html(str.substr(0, index) + '<span class="animate">|</span>');

			setTimeout(function() {
				index++;

				if(index === len + 1) {
					$('.animate').addClass('on');
					return;
				}

				input();

			}, Math.random() * 600)

			console.log(index);
		}

		input();

Principio de realización

Se logra una sensación de frustración similar a la de una máquina de escribir a través del temporizador combinado con la intercepción de cadenas, y el índice se acumula a través de la recursividad. Equivale a interceptar un byte en el primer segundo, interceptar dos bytes en el segundo segundo, y así sucesivamente ... El tiempo del temporizador es un número aleatorio, y la escritura simulada tiene una mejor pausa. Agregue la condición de ciclo final en la llamada recursiva, comience la animación antes del final y simule el latido del cursor.