API tools faq
paste
luistavares

JavaScript - Criando um cronômetro decrescente com JavaScript

luistavares
Oct 26th, 2022
1,092
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.90 KB | Source Code | 1 0
raw download clone embed print report
  1. <html lang="pt-br">
  2. <head>
  3. <meta charset="utf-8" />
  4. <title>Cronômetro com Javascript</title>
  5. <style>
  6.     *{
  7.         margin:0;
  8.         padding:0;
  9.     }
  10.     body{
  11.         background:#CCC;
  12.         color:#FFF;
  13.         font-family:Arial, Helvetica, sans-serif;
  14.         text-align:center;
  15.     }
  16.     #topo{
  17.         background:#069;
  18.         height:50px;   
  19.         border-bottom:2px solid #006;
  20.         padding-top: 10px;
  21.     }
  22.     h2 a{
  23.         color:#069;
  24.         text-decoration:none;
  25.     }
  26.     h2 a:hover{
  27.         color:#006;
  28.     }
  29.     input{
  30.         background:#ccc;
  31.         width:600px;
  32.         height:200px;
  33.         line-height:200px;
  34.         font-size:240px;
  35.         border:none;
  36.     }
  37.     #cro{
  38.         width: 600px;
  39.         clear:both;
  40.         margin-bottom: 20px;
  41.         margin-left: auto;
  42.         margin-right:auto;
  43.     }
  44.     .mybtn{
  45.         cursor: pointer;
  46.         font-size:18px;
  47.         clear:both;
  48.         margin-bottom: 6px;
  49.         padding: 10px;
  50.         border-radius: 10px;
  51.         width: 450px;
  52.     }
  53.     .container{
  54.         width:100%;
  55.     }
  56.     .zeb{
  57.         background-color: #88AAAA;
  58.     }
  59. </style>
  60. <script type="text/javascript">
  61.     var tempo = 300;        // tempo em segundos
  62.     var working = false;    // sinaliza se o timer está ativado   
  63.     function startCountdown(){
  64.        
  65.         let min = parseInt(tempo/60);   // Pega a parte inteira dos minutos    
  66.         let seg = tempo%60;             // Calcula os segundos restantes
  67.         let smin = min.toString().padStart(2, '0') // Formata o número em duas casas
  68.         let sseg = seg.toString().padStart(2, '0')     
  69.        
  70.         let tempoTela = smin + ':' + sseg; // Variável para formatar no estilo cronômetro
  71.         document.querySelector(".cronometro").value = tempoTela;
  72.                
  73.         if(tempo > 15){ // tempo maior que 15 segundos
  74.             setTimeout(startCountdown, 1000); // espera 1s e chama novamente função          
  75.             tempo--; // decrementa o tempo     
  76.         }
  77.         else if (tempo > 0){ // entra neste IF entre segundos 1 e 15
  78.             document.querySelector(".cronometro").style.backgroundColor = 'red';
  79.             setTimeout(startCountdown, 1000); // espera 1s e chama novamente função          
  80.             tempo--; // decrementa o tempo
  81.         }
  82.         else { // entra neste IF no segundo 0                  
  83.             working = false;
  84.             document.querySelector(".cronometro").style.backgroundColor = '#ccc';          
  85.         }
  86.     }
  87.  
  88.     function setTempo(t){      
  89.         if (working == false){
  90.             tempo = t;
  91.             working = true;
  92.             startCountdown();
  93.         }
  94.     }
  95.  
  96. </script>
  97. </head>
  98. <body>
  99.     <div class='container'>
  100.         <div id="topo">
  101.             <h1>Debate Eleições 2022 - Cronômetro</h1>
  102.         </div>
  103.         <div id="cro">
  104.             <input type="text" class="cronometro" value="00:00" readonly/>
  105.         </div><br />
  106.         <button class='mybtn' onclick="setTempo(180)">3 minutos (Apresentação Inicial)</button><br />
  107.         <button class='mybtn zeb' onclick="setTempo(300)">5 minutos (Bloco perguntas, Considerações Finais)</button><br />
  108.         <button class='mybtn' onclick="setTempo(60)">1 minuto (Pergunta/Tréplica)</button><br />
  109.         <button class='mybtn zeb' onclick="setTempo(120)">2 minutos (Resposta/Réplica)</button><br />
  110.         <button class='mybtn' onclick="window.location='index.html';">Limpar</button>
  111.     </div>
  112. </body>
  113. </html>
  114.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!