<html>
<head>
<title>Efeito digitar em página web</title>
<script type="text/javascript">
var posicao = 0;
var mensagem = "Sua mensagem aqui "; //Esse texto
function rola() {
document.getElementById("lugar").innerHTML =
mensagem.substring(posicao,mensagem,length);
posicao++;
if (posicao == mensagem.length) {
posicao = 0;
}
setTimeout("rola()", 130);
}
</script>
</head>
<body onload="rola()">
<div id="lugar"></div>
</body>
</html>
Adicione um comentário
|
2 Respostas
Adicionei um color na div. Veja se resolve.
var posicao = 0;
var mensagem = "Sua mensagem aqui "; //Esse texto
function rola() {
document.getElementById("lugar").innerHTML =
mensagem.substring(posicao,mensagem,length);
posicao++;
if (posicao == mensagem.length) {
posicao = 0;
}
setTimeout("rola()", 130);
}
#lugar{
color: red;
}
<body onload="rola()">
<div id="lugar"></div>
Você pode alterar diretamente na tag:
<div id="lugar" style="color:rgba(255, 0, 0, 0.8);">
Ou pelo Javascript:
document.getElementById("lugar").style.color =rgba(255, 0, 0, 0.8);
Você pode criar cores randomicas basta criar uma string rgba(ou rgb) e passar para o atributo style.color, código do rgba randomico tirado dessa pergunta segue o código:
<html>
<head>
<title>Efeito digitar em página web</title>
<script type="text/javascript">
var posicao = 0;
var mensagem = "Sua mensagem aqui "; //Esse texto
function rola() {
document.getElementById("lugar").innerHTML =
mensagem.substring(posicao, mensagem, length);
posicao++;
document.getElementById("lugar").style.color = random_rgba();
if (posicao == mensagem.length) {
posicao = 0;
}
setTimeout("rola()", 130);
}
function random_rgba() {
var o = Math.round,
r = Math.random,
s = 255;
return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
};
</script>
</head>
<body onload="rola()">
<div id="lugar"></div>
</body>
</html>
ou apenas uma cor a cada chamada rola()
:
<html>
<head>
<title>Efeito digitar em página web</title>
<script type="text/javascript">
var posicao = 0;
var mensagem = "Sua mensagem aqui "; //Esse texto
function rola() {
document.getElementById("lugar").innerHTML =
mensagem.substring(posicao, mensagem, length);
posicao++;
if (posicao == mensagem.length) {
posicao = 0;
}
setTimeout("rola()", 130);
}
function random_rgba() {
var o = Math.round,
r = Math.random,
s = 255;
return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
};
function RandomTextColor() {
document.getElementById("lugar").style.color = random_rgba();
}
</script>
</head>
<body onload="rola(); RandomTextColor()">
<div id="lugar"></div>
</body>
</html>
`
-
-
-
@LeonardoBonetti não seria menos custoso nessa situação adicionar diretamente na div sem função ou algo do tipo ? Commented 3/08/2017 às 15:28
-
O custo da função de cor aleatória é tão pequeno , quase que nulo não muda muito, só quis dar uma versatilidade. Commented 3/08/2017 às 15:32
-