Show text randomly

Navigation
-3

I wanted my text to change every 10 seconds, like this:

I wanted a text to appear in this place, and after 10 seconds it would change the text automatically, and so it would change ...

    
asked by anonymous 23.02.2015 / 18:05

3 answers

14

I would do so: 

(function() {
    "user strict";

    var i, j, textos, teste, target;

    textos = [
        "Bem Vindo!",
        "Fique de olho",
        "Porque",
        "Eu vou",
        "Ficar mudando",
        "Em um loop",
        "Infinito!!!"
    ];

    i = 0;
    j = textos.length;

    teste = function () {
        if (target) {//Verificar se o elemento DOM já existe na página
            target.innerHTML = textos[i];
            i++;
            if (i === j){
                i = 0;
            }

            //1000 = 1seg, 2000 = 2segs e por ai vai....
            window.setTimeout(teste, 2000);
        } else {
            //Se o elemento ainda não foi "renderizado" tenta busca-lo novamente
            target = document.getElementById("texto");

            //O timeout é mais rápido aqui para que quando o elemento estiver disponivel o script iniciei sem o delay de 2 segundos.
            window.setTimeout(teste, 100);
        }
    };

    teste();//Inicia o processo
})();
#texto {
   text-align: center;
}
<h1 id="texto"></h1>
    
25.02.2015 / 14:36
6

You can use the setInterval function, setting at: link

EXAMPLE 

var textos = ["1", "2", "a", "b"];
var interval = 10000;
var i = 0;

function MudaTexto(){
    //Altera o texto do elemento informado, com o conteúdo 'i' do array textos        
    $('#idDoElemento').text(textos[i]);

    //Move o pivô do array, até chegar ao final do mesmo, quando chegar ao 
    //final volta para o começo
    if(++i == textos.length) i = 0;
}

$(document).ready(function(){
    //Executa a função MudaTexto, no interval definido
    setInterval(MudaTexto, interval);
});
    
25.02.2015 / 02:26
6

Marcelo and Diego have already provided efficient solutions to your problem; But here I'll put a slightly different one, if you are interested at some point in showing random texts ... 

$(document.body).ready(function(){
    textos = ['Texto exemplo', 'Texto 2', 'Aleatório', 'Exemplo para o usuário', 'Texto 5'];
    $('#textos').text(textos[0]);
    setInterval(function() {
        var indexTexto = Math.floor(Math.random() * textos.length); //Pegará um número aleatório entre 0 e a quantidade de textos;
        $('#textos').text(textos[indexTexto]); //Definirá o texto de acordo com o índice sorteado
    },
    1000); //1 segundo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="textos"></div>
    
25.02.2015 / 17:23
Link button is not clickable [closed] Set placeholder with PHP variable [closed]