How to invoke countdown timer with each click on the button?

Question

How to invoke countdown timer with each click on the button?

Navigation

#1 by (2 votes)

0

I want to develop something simple, but that's making me frustrated.

I will try to express myself in the best way possible.

To make things simpler here, I'm just bringing as a example a randomized Photo Gallery, which, by clicking on the "Snap!" button, should show some random photo in div named id='fig' .

But! Together you will have a countdown timer, so you can clear this id='fig' after 5 seconds. Getting div released for a new back sample.

My problem is to unify the two distinct functions, to give this elegant air.

The randomization of the image + the regressive counter , and show both at the same time.

I confess that I can not, despite my efforts.

To illustrate the obstacle, I developed some examples. They are:

Randomize Photo

    <!--
    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>

I have been able to do this in the form below:

Clear Photo

    <!--
    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>

However, this is not in its full functionality the way I try to do it.

A countdown timer is still missing in id='txt' .

I want this function below:

Regressive Counter

    <!--

    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>

Get in with the snippet code above.

In short, I want to put it all together into one function.

javascript random contador

asked by anonymous 21.03.2017 / 23:16

1 answer

How to create search filters in Laravel? TypeError: POST data should be bytes, an iterable of bytes, or a file object. It can not be of type str

score 2 · Accepted Answer

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>