Display text at random

Asked

Viewed 1,255 times

-3

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

I wanted a text to appear at this location, and after 10 seconds I would automatically change the text, and so on...

javascript jquery html
  • 1

    Do you have any code you’ve tested? This might help you: http://stackoverflow.com/questions/19156590/jquery-load-content-then-refresh-every-2-second | http://www.9lessons.info/2009/07/auto-load-refresh-every-10-seconds-withhtml

  • Not yet, I only have the code of the same div and the text between the tags.

  • Example, I wanted to do like this: Text 1 Texo 2

  • Only they both change each other every 10 seconds

  • I sent 2 sites (comment above) to you, they implement what you would like... just adapt to get the text from where you want...

  • 4

    And what you tried?

Show 1 more comment

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>

6

You can use the function setInterval, definition in: http://www.w3schools.com/jsref/met_win_setinterval.asp

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);
});

6

Marcelo and Diego have already provided efficient solutions to their problem; But here I will put a slightly different one, in case 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>
<div id="textos"></div>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.