Commencer le compteur sur le bouton cliquer?

-1

J'ai ce compte à rebours, qui compte à rebours pendant 10 minutes sur un clic de bouton. Eh bien, c'est ce que c'est censé faire. Il commence réellement dès que la page s'ouvre. Ce que je veux faire, c'est commencer à compter quand on clique sur le bouton!Commencer le compteur sur le bouton cliquer?

<!DOCTYPE html> 
<html> 
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> 
<link rel="icon" type="image/ico" href="favicon.ico"> 

<style> 

* 
{ 
    background-color: #422833; 
} 

* 
{ 
    font-family: 'Ubuntu', sans-serif; 
    font-family: Helvetica, sans-serif; 
} 


p, h1 
{ 
    color: #E5E6D8; 
} 

    p, h2 
{ 
    color: #6F8A79; 
} 

textarea 
{ 
    color: #422833;  
    font-family: "Courier New", Courier, monospace; 
    font-size:18px; 
    background-color: #E5E6D8; 
    border-radius: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline:none; 

} 


#title 
{ 
    text-align: center; 
} 

#text 
{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    outline: none; 

} 

    button 
    { 
     border-radius: 10px; 
    width: 120px; 
    height: 45px; 
    border: none; 

    font-weight:bold; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    outline: none; 
    background-color:#6F8A79; 
    box-shadow:#003; 
    } 

    #word, h2 
    { 

    text-align:center; 
    color: #E4D5A3; 
    } 

    .finish 
    { 
     color: #C86368; 
    } 

    #finish, h1 
    { 
    text-align:center; 

    }  
</style> 

<title>WRITER</title> 

</head> 

<body> 

<script>   
    var mins = 10; //Set the number of minutes you need 
    var secs = mins * 60; 
    var currentSeconds = 0; 
    var currentMinutes = 0; 
    setTimeout('Decrement()',1000); 

    function Decrement() { 
     currentMinutes = Math.floor(secs/60); 
     currentSeconds = secs % 60; 
     if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds; 
     secs--; 
     document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into. 
     if(secs !== -1) setTimeout('Decrement()',1000); 
    } 

</script> 

<h1 id="title"> 
    START THE TIMER 
</h1> 

<button onclick="Decrement()">GO!</button> 

<h2 id="timerText">######</h2> 

<br/> 

<textarea rows="15" cols="60" id="text"> 

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174 2014 #ImYourMum</h2> 

</body> 
</html>

Source

2014-07-24 great there

supprime les guillemets simples autour de setTimeout ('Decrement()', 1000); donc c'est setTimeout (Decrement(), 1000); – GCallie

vous appelez dans le mauvais moment, essayez ceci:

<!DOCTYPE html> 
<html> 
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> 
<link rel="icon" type="image/ico" href="favicon.ico"> 

<style> 

* 
{ 
    background-color: #422833; 
} 

* 
{ 
    font-family: 'Ubuntu', sans-serif; 
    font-family: Helvetica, sans-serif; 
} 


p, h1 
{ 
    color: #E5E6D8; 
} 

    p, h2 
{ 
    color: #6F8A79; 
} 

textarea 
{ 
    color: #422833;  
    font-family: "Courier New", Courier, monospace; 
    font-size:18px; 
    background-color: #E5E6D8; 
    border-radius: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline:none; 

} 


#title 
{ 
    text-align: center; 
} 

#text 
{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    outline: none; 

} 

    button 
    { 
     border-radius: 10px; 
    width: 120px; 
    height: 45px; 
    border: none; 

    font-weight:bold; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    outline: none; 
    background-color:#6F8A79; 
    box-shadow:#003; 
    } 

    #word, h2 
    { 

    text-align:center; 
    color: #E4D5A3; 
    } 

    .finish 
    { 
     color: #C86368; 
    } 

    #finish, h1 
    { 
    text-align:center; 

    }  
</style> 

<title>WRITER</title> 

</head> 

<body> 

<script>   
    var mins = 10; //Set the number of minutes you need 
    var secs = mins * 60; 
    var currentSeconds = 0; 
    var currentMinutes = 0; 


    function Decrement() { 
     currentMinutes = Math.floor(secs/60); 
     currentSeconds = secs % 60; 
     if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds; 
     secs--; 
     document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into. 
     if(secs !== -1) setTimeout('Decrement()',1000); 
    } 

</script> 

<h1 id="title"> 
    START THE TIMER 
</h1> 

<button onclick=" setTimeout('Decrement()',1000);">GO!</button> 

<h2 id="timerText">######</h2> 

<br/> 

<textarea rows="15" cols="60" id="text"> 

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174 2014 #ImYourMum</h2> 

</body> 
</html>

Source

2014-07-24 12:32:18 Youness

Votre seule citation est le problème, here est une copie de travail de votre code à violon.

<body> 
    <script> 
     var mins = 10; //Set the number of minutes you need 
     var secs = mins * 60; 
     var currentSeconds = 0; 
     var currentMinutes = 0; 
     setTimeout(Decrement(), 1000); 

     function Decrement() { 
      currentMinutes = Math.floor(secs/60); 
      currentSeconds = secs % 60; 
      if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds; 
      secs--; 
      document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into. 
      if (secs !== -1) setTimeout('Decrement()', 1000); 
     } 
    </script> 

<h1 id="title"> 
    START THE TIMER 
</h1> 

    <button onclick="Decrement()">GO!</button> 

<h2 id="timerText">######</h2> 

    <br/> 
    <textarea rows="15" cols="60" id="text"></textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174 2014 #ImYourMum</h2> 

</body>

Source

2014-07-24 12:39:07 Lrrr

Vous devez supprimer le démarrage automatique:

var currentMinutes = 0; 
setTimeout('Decrement()',1000); <-- remove this line which starts it

De plus, si vous utilisez:

setTimeout('Decrement()',1000);

Il est écrit:

setTimeout(Decrement, 1000);

Mais, Dans l'ensemble, vous devriez envisager d'utiliser setInterval si vous ne pouvez pas fonctionner en continu après une seconde. Par conséquent, vous pouvez réécrire votre fonction d'être comme celui-ci (voir la suppression de setTimeout):

function Decrement() { 
    currentMinutes = Math.floor(secs/60); 
    currentSeconds = secs % 60; 
    if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds; 
    secs--; 
    document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into. 
}

et démarrez le chronomètre en utilisant le code suivant:

<button onclick="setInterval(Decrement, 1000)">GO!</button>

est ici js fiddle example d'un code de travail.

Pour lire plus loin, je vous recommandons de vérifier:

setTimeout or setInterval
calling functions with setTimeout (haut voté réponse)

Vive.

Source

2014-07-24 12:43:38

Commencer le compteur sur le bouton cliquer?

Répondre

Questions connexes