Jump to content
ronaldojsp

DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

Recommended Posts

Olá, estou usando esses botões no meu projeto,

 <button class="btn1" onclick="dispara('c1')">Clique aqui</button>
<span id="c1" inicial="1"></span>
 <button class="btn2" onclick="dispara('c2')">Clique aqui</button>
<span id="c2" inicial="2"></span>
 <button class="btn3" onclick="dispara('c3')">Clique aqui</button>
<span id="c3" inicial="3"></span>
 <button class="btn4" onclick="dispara('c4')">Clique aqui</button>
<span id="c4" inicial="3600"></span>

Cada um deles com um tempo diferente,

$('.btn1').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 1min. */
  }, 60000);
});
$('.btn2').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 2min. */
  }, 120000);
});
$('.btn3').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 3min. */
  }, 180000);
});
$('.btn4').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 1h. */
  }, 3600000);
}); 

Visualizar botões aqui: https://jsfiddle.net/4h3pnL26/10/

Minhas Questões são as seguintes,

1 - quando eu atualizo a pagina os botões voltam a ficar habilitados, que alterações devo fazer pra arrumar?

2 - como fazer cada botão iniciar um contador regressivo de acordo com seus respectivos tempos? (c1, c2, c3 e c4)

3 - como seria o código desse contador regressivo?

Desde já eu agradeço...

Share this post


Link to post
Share on other sites

1. use cookies

2. use variáveis e elementos diferentes para cada botão

3. http://wbruno.github.io/examples/time-counter/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By manoaj
      Boa noite pessoal!
      Alguém ai entente dos checkouts do Mercado Pago pra me explicar como eu obtenho os dados da preferência criada através da url disponível na API
      https://api.mercadopago.com/checkout/preferences/:id?access_token=ACCESS_TOKEN_ENV  
    • By Richard.Ribeiro
      Boa tarde a todos, Uma ajuda Por favor, alguém pode me explicar porque sempre que eu digito no" input name=vsat" e clico em buscar a DIV do " select id=rightValues" SOME
      alguem poderia ajudar? o erro está no  PHP ou JS
      desde já agradeço a atenção.
      <style media="screen">
      SELECT, INPUT[type="text"] {
        width:500px;
        box-sizing: border-box;
      }
      SELECT, INPUT[type="button"] {
        font-size: 20px;
      }
      SECTION {
        padding: 8px;
        background-color: #f0f0f0;
        overflow: auto;
      }
      SECTION > DIV {
        float: left;
        padding: 30px;
      }
      SECTION > DIV + DIV {
        width: 200px;
        text-align: center;
      }
      </style>
      <section class="container">
      <form  method="post">
        <?php
        if (isset($_POST['buscar'])) {
            $id_gmm = $_POST['gmm'];
          }elseif (isset($_POST['buscar2'])){
                $vsat = $_POST['vsat'];
            }
            ?>
      <h2><i class="fa fa-link"></i> Vincular Componentes a VSAT</h2>
      <h4><i class="fa fa-arrow-down"></i> Itens da GMM</h4>
          <div>
            <input type="text" name="gmm"  placeholder="Digite o N° da GMM">
            <input type="submit" name="buscar" value="buscar"><br>
              <select id="leftValues" size="5" multiple>
                <?php
                $consultaGmm = ConexaoBD::conectar()->prepare("SELECT tipo_material_id FROM itens_fornecidos WHERE gmm_id = $id_gmm ");
                $consultaGmm->execute();
                $consultaGmm = $consultaGmm->fetchAll();
                foreach ($consultaGmm as $key => $value) {
               ?>
              <option value="<?php echo  $value['tipo_material_id'];?>">
               <?php echo $value['tipo_material_id']; ?>
               </option>
            <?php }?>
            </select>
          </div>
          <div>
              <input type="button" id="btnLeft" value="&lt;&lt;" />
              <br>  <br>
              <input type="button" id="btnRight" value="&gt;&gt;" />
          </div>
          <div>
            <label for="">VSAT</label>
            <input type="text" name="vsat"  placeholder="Digite o ID/IDE da VSAT">
            <input type="submit" name="buscar2" value="buscar"><br>
              <select id="rightValues" size="4" multiple>
                <?php
                $consultaVsat = ConexaoBD::conectar()->prepare("SELECT estoque_material_id FROM componentes_instalados WHERE estoque_material_id = $vsat ");
                $consultaVsat->execute();
                $consultaVsat = $consultaVsat->fetchAll();
                foreach ($consultaVsat as $key => $valueVsat) {
               ?>
               <option value="<?php echo $valueVsat['estoque_material_id'];?>">
                 <?php echo $valueVsat['estoque_material_id']; ?>
               </option>
             <?php } ?>
              </select>
          </div>
      </form>
      </section>
      <script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
      <script src="<?php echo INCLUDE_PATH_PAINEL ?>js/main.js"></script>
      <script type="text/javascript">
      $("#btnLeft").click(function () {
          var selectedItem = $("#rightValues option:selected");
          $("#leftValues").append(selectedItem);
      });
      $("#btnRight").click(function () {
          var selectedItem = $("#leftValues option:selected");
          $("#rightValues").append(selectedItem);
      });
       
      </script>
      <?php die(); ?>
       
       
    • By mzaidan
      Prezados, existe alguma função que quando a pessoa entre em uma pagina um <button> seja clicado automaticamente???
       
      <div class="col px-0"> <button id="by-link" type="button" class="btn btn-info">Enviar</button> </div> Grato
    • By sronze
      Ola estou com um problema em JavaScript
      O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
       
      GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
       
      Link do XML: https://www.w3schools.com/js/cd_catalog.xm
       
      Segue meu código:
      <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> Nome:<input id="idInput"> UF:<input id="idInput02"> Ano:<input id="idInput03"> <script> var ValorXML1 = []; $(document).on('keyup' , '#idInput' ,function(){ var keyvalue = $("#idInput").val(); var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { ValorXML1 = []; CaregarXML(this , keyvalue); } }; xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true); xhttp.send(); }); function CaregarXML(xml , key) { var x, i, xmlDoc , key; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TITLE"); var cont = 0; for (i = 0; i < x.length; i++) { var valor = x[i].childNodes[0].nodeValue.trim(); var pattern = valor.substring(0 , key.length); if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){ ValorXML1.push(valor); cont++; } } $("#idInput").autocomplete({ source: ValorXML1 }); } $( function() { $( "#idInput" ).autocomplete({ source:ValorXML1 }); }); </script>  
    • By kamaii
      Oi, sou novo nisso de programação e sabe criei um servidor ftp para guardar meus arquivos html, php e js
      mas quando executo php n vai só aparece o codigo e comandos que estão no arquivo 
      e tipo n sei se precisa instalar algo como uma linguagem ou biblioteca no pc
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.