Código de JavaScript - Código para simular la escritura de un texto

1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 12 de Abril del 2021gráfica de visualizaciones de la versión: 1
3.171 visualizaciones desde el 12 de Abril del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .text {
            border:1px solid Grey;
            display:block;
            width: 500px;
            padding: 10px 20px;
            margin:10px;
            font-size:22px;
        }
    </style>
</head>
 
<body>
 
<div class="text" id="message">&nbsp;</div>
<div class="text" id="message2">&nbsp;</div>
 
</body>
</html>
 
<script>
function textTicker(text, element) {
    this.el = document.querySelector(element);
    this.pos = 0;
 
    // función que va mostrando el texto letra a letra
    this.show = () => {
        this.pos++;
        this.el.innerHTML=text.substring(0, this.pos)+"_";
 
        // cuando llega al final del texto
        if (text.length<=this.pos) {
            this.pos=0;
 
            // detenemos el intervalo
            clearInterval(this.interval);
 
            // iniciamos el intervalo nuevamente al cabo de 1 segundo
            setTimeout(() => this.interval=setInterval(this.show, 80), 1000);
        }
    };
 
    // creamos el intervalo cada 80 milisegundos
    this.interval=setInterval(this.show, 80);
}
 
res=new textTicker("Bienvenido a los códigos de Javascripts!", "#message2");
res=new textTicker("La Web del Programador", "#message");
</script>



Comentarios sobre la versión: 1 (2)

Imágen de perfil
29 de Septiembre del 2021
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Ale
21 de Diciembre del 2023
estrellaestrellaestrellaestrellaestrella
Espero que este regalo te ayude a desarrollar tus habilidades, y te permita en un futuro viajar tanto como al fenómeno de Lethal Crysis.
Responder

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s7006