<!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"> </div>
<div class="text" id="message2"> </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>
Crear cuenta
Comentarios sobre la versión: 1 (1)