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"> </div>
<span id="txt"> </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"> </div>
<span id="txt"> </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"> </div>
<span id="txt"> </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.