Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #59 da revista programar. Faz já o download aqui!

Francisco14

Temporizador para desactivar um botao.

Mensagens Recomendadas

Francisco14    0
Francisco14

Boa tarde precisava de ajuda para por este código a funcionar, tenho um botão e um contador de cliques no botão e queria por um temporizador de 30 segundos para quando chegar a 0 segundos o botão fica desactivado.

Código (não funcional)

<html>
<head>
<center>
<br>
<br>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Increment count when button is clicked</title>
</head>
<body>
<input type="button" value="Count" id="countButton" />
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
 var count = 0;
 var button = document.getElementById("countButton");
 var display = document.getElementById("displayCount");
 button.onclick = function(){
 count++;
 display.innerHTML = count;
 }
<script>
var seconds = 10;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
 remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
 clearInterval(countdownTimer);
 counterbutton.disabled = true;
} else {
 seconds--;
}
}

var countdownTimer = setInterval('secondPassed()', 1000);


</script>
</body>
</html>

Obrigado.

Editado por apocsantos
geshi

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
HappyHippyHippo    1140
HappyHippyHippo

xiiiii ... ca ganda volta !!!

<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Increment count when button is clicked</title>
 </head>
 <body>
   <p>Time to pressed the button <span id="displayTime">30</span> s</p>
   <input type="button" value="Count" id="countButton" />
   <p>The button was pressed <span id="displayCount">0</span> times.</p>

   <script type="text/javascript">
   var count = 0;                                                         // quantas vezes o botão foi precionado
   var max_time = 30 * 1000;                                              // tempo máximo de execução

   var button = document.getElementById("countButton");                   // botao
   var display_count = document.getElementById("displayCount");           // display do número de vezes que o botão foi carregado dentro do tempo
   var display_time = document.getElementById("displayTime");             // display do tempo restante

   button.onclick = function() {                                          // callback de carregar no botão
       if (display_time.innerHTML != 0)                                   // se ainda estiver dentro do tempo
           display_count.innerHTML = ++count;                             // incrementar o número de vezes que o botão foi carregado
   }

   function secondPassed() {                                              // callback do setInterval
       var now = new Date().getTime();                                    // saber o tempo actual
       var diff = now - start;                                            // saber quanto tempo já passou do início

       if (diff > max_time) {                                             // se o tempo que passou ultrapassou o tempo máximo
           clearInterval(countdownTimer)                                  // destruir o setInterval
           display_time.innerHTML = 0;                                    // mostrar que acabou o tempo
       } else
           display_time.innerHTML = Math.round((max_time - diff) / 1000); // amostrar o tempo que falta
   }

   display_time.innerHTML = max_time / 1000;                              // amostrar o tempo inicial

   var start = new Date().getTime();                                      // guarar o tempo de inicio
   var countdownTimer = setInterval('secondPassed()', 200);               // nota que coloquei um valor diferente de 1000 para veres como o código é flexivel
   </script>
 </body>
</html>


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
NelsonBN    1
NelsonBN
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Increment count when button is clicked</title>
</head>
<body>
 <center>
  <input type="button" value="Count" id="countButton" />
  <p>The button was pressed <span id="displayCount">0</span> times.</p>
 </center>
 <script type="text/javascript">
   var count = 0;
   var button = document.getElementById("countButton");
   var display = document.getElementById("displayCount");

   var btnEmable = true;

   button.onclick = function() {
   if(btnEmable){
 count++;
 display.innerHTML = count;
   }
  }
  setTimeout(function(){
   btnEmable = false;
   button.disabled = true;
  }, 30000);
 </script>
</body>
</html>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
HappyHippyHippo    1140
HappyHippyHippo

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Increment count when button is clicked</title>
</head>
<body>
 <center>
  <input type="button" value="Count" id="countButton" />
  <p>The button was pressed <span id="displayCount">0</span> times.</p>
 </center>
 <script type="text/javascript">
   var count = 0;
   var button = document.getElementById("countButton");
   var display = document.getElementById("displayCount");

   var btnEmable = true;

   button.onclick = function() {
   if(btnEmable){
    count++;
    display.innerHTML = count;
   }
  }
  setTimeout(function(){
   btnEmable = false;
   button.disabled = true;
  }, 30000);
 </script>
</body>
</html>

isso de colocar um tempo no setTimeout de 30000 parece muito bonito, mas na realidade, o setTimeout não acontece exactamente 30 segundos após o registo da função.

existe sempre um pequeno atraso, por mais minúsculo que seja. é essa a razão que coloquei no meu código um método mais flexível.


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.