0

Quero desenvolver algo simples, mas que ta me deixando frustado.

Vou tentar me expressar da melhor maneira possível.

Para simplificar as coisas por aqui, estou trazendo apenas como exemplo uma Galeria de Foto randomizada, que ao clicar no botão "Aperte!", deve exibir alguma foto aleatória numa div denominada id='fig'.

Mas! Juntamente terá um contador regressivo, para que limpe esta id='fig' após 5 segundos. Ficando a div liberada para uma nova amostra posterior.

O meu problema esta em unificar as duas funções distintas, para dar esse ar elegante.

A randomização da image + o contador regressivo, e mostrar os dois ao mesmo tempo.

Confesso que não estou conseguindo, apesar de meus esforços.

Para ilustrar o obstáculo, elaborei alguns códigos exemplos. São eles:

Randomize Foto

    <!--
    var slide = ["procurando_dory.jpg","big_buck_bunny.jpg","madagascar_2.jpg","monstros_sa_2.jpg"];

    function clic() {
        var randomize = Math.floor((Math.random() * slide.length));
        document.getElementById('fig').innerHTML = '<img src="https://sites.google.com/site/mplayerplugin/repositorio/' + slide[randomize] + '" />';
    }
    -->
<center>

    <div id="fig"> &nbsp; </div>

    <span id="txt"> &nbsp; </span>

    <hr size="1" color="silver">

    <input type="button" onclick="clic()" value="Aperte!" id="troca" />

</center>

Tenho conseguindo fazer tal feito na forma abaixo:

Limpar Foto

    <!--
    var slide = ["procurando_dory.jpg","big_buck_bunny.jpg","madagascar_2.jpg","monstros_sa_2.jpg"];

    function clic() {
        var randomize = Math.floor((Math.random() * slide.length));
        document.getElementById('fig').innerHTML = '<img src="https://sites.google.com/site/mplayerplugin/repositorio/' + slide[randomize] + '" />';
    window.setInterval(limpar, 5000); // Define os 5 segundos para limpar
    }

    function limpar() {
    document.getElementById('fig').innerHTML = ''; // Esvazia a div id='fig'
}
    -->
<center>

    <div id="fig"> &nbsp; </div>

    <span id="txt"> &nbsp; </span>

    <hr size="1" color="silver">

    <input type="button" onclick="clic()" value="Aperte!" id="troca" />

</center>

No entanto, isto não é em sua total funcionalidade a maneira, a qual procuro fazer.

Ainda falta mostrar um contador regressivo na id='txt'.

Quero que esta função abaixo:

Contador Regressivo

    <!--

    var i = 5;
    var intervalo = window.setInterval(function() {
        document.getElementById('txt').textContent = i;
        i--;
    }, 1000);

    setTimeout(function() {
        clearInterval(intervalo);
    document.getElementById('fig').innerHTML = "";
    }, 5000);

    -->
<center>

    <div id="fig"> &nbsp; </div>

    <span id="txt"> &nbsp; </span>

    <hr size="1" color="silver">

<input type="button" onclick="clic()" value="Aperte!" id="troca" />

</center>

Entre em conjunto com o código do "snippet" acima.

Em resumo, quero juntar tudo isso numa só função.

1 Resposta 1

2

var slide = ["procurando_dory.jpg","big_buck_bunny.jpg","madagascar_2.jpg","monstros_sa_2.jpg"];
var i = 5; // Atribui o valor 5 a variável 'i'
function clic() 
{
   var randomize = Math.floor((Math.random() * slide.length));
document.getElementById('fig').innerHTML = '<img src=\"https://sites.google.com/site/mplayerplugin/repositorio/' + slide[randomize] + '\" />';
var intervalo = setInterval(function() // Aqui vai setar o loop  de 1 em 1 segundo.
{
    document.getElementById('txt').textContent = i; // envia o valor de i para o elemento com id 'txt'
    i--; // retira 1 de 'i' para a contagem regressiva
    if(i < 0) // se o valor de i for menor do que zero entra no if
    {
        clearInterval(intervalo); // parar o loop 'intervalo' que foi setado no inicio
        limpar(); // ativa a função limpar
        i = 5;// atribui o valor 5 a variável 'i' para poder recomeçar a contagem quando for pressionado o botão
        document.getElementById('txt').textContent = 0; // envia o valor 0 para o elemento com id 'txt'
    };
}, 1000); // Loop de 1 em 1 segundo (1000 milissegundos equivale a 1 segundo)
};

function limpar() 
{
	document.getElementById('fig').innerHTML = ''; // Esvazia a div id='fig'
};
<center>
    <div id="fig"> &nbsp; </div>
    <span id="txt"> &nbsp; </span>
    <hr size="1" color="silver">
    <input type="button" onclick="clic()" value="Aperte!" id="troca" />
</center>

5
  • user31050 poderia adicionar uma descrição ao codigo apresentado. Seria bacana para entender melhor o que você fez. =) Commented 22/03/2017 às 0:37
  • Tem um botão com simbolo de codigo que vc insere, mas ja editei para você. A descrição voce pode colocar acima do snippet Commented 22/03/2017 às 0:44
  • Pode ser isso também, mas na verdade foi uma sugestão. Commented 22/03/2017 às 0:50
  • @user31050 A junção, entre a função randômico e o temporizador, realmente ficou bom! Não havia pensado em por uma condição if dentro do temporizador, para conseguir este feito. Parabéns!!! Commented 22/03/2017 às 2:12
  • Diego alterei os comentários pra ficar mais claro pra você entender, uma coisa que foi alterada no código por outro colega foi o time do loop, passou a ser 1 segundo em vez de 5 segundos a cada loop de repetição, talvez você queira também alterar no seu projeto.
    – user31050
    Commented 24/03/2017 às 19:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .