Jump to content
Vinicius Bazan

Contador

By Vinicius Bazan, in Javascript

Recommended Posts

Vinicius Bazan    0

Vinicius Bazan
Posted

 Bom dia, Boa tarde e Boa noite!

 

  Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).

  O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!

 Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.

  

<!DOCTYPE html>
<html>
<head>
 <title>javascript</title>
 <meta charset="utf-8">
 <script type="text/javascript">
 
  function relogio() {
   var data = new Date();
   var horas = data.getHours();
   var minutos = data.getMinutes();
   var segundos = data.getSeconds();

   if (horas < 10) {
    horas = "0"+horas;
   }
   if (minutos < 10) {
    segundos = "0"+minutos;
   }
   if (segundos < 10) {
    segundos = "0"+segundos;
   }

   document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos;
  }
  window.setInterval("relogio()",1000);
   
  // Aqui começa a função que eu tentei fazer para o contador
   
  function contador() {
	var data = new Date();
	var horas = data.getHours();
	var minutos = data.getMinutes();
	var segundos = data.getSeconds();
	var cont = ((minutos + (horas * 60))*60) + segundos ;
	document.getElementById("contador").innerHTML= Math.floor(cont/5);
	}
  
  
 </script>
 <style type="text/css">
  #relogio {
   font:bold 28pt arial;
   display: block;
   margin: 100px auto;
   padding: 30px;
   background-color: #FFFF00;
   width: 150px;
   border-radius: 6px;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

  }
  #contador {
   font:bold 28pt arial;
   display: block;
   margin: 100px auto;
   padding: 30px;
   background-color: #FFFF00;
   width: 150px;
   border-radius: 6px;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

  }

 </style>
</head>
<body onload="relogio();">
<div id="relogio">
</div>
<hr>
<div id="contador">
</div>
</body>
</html>

 

 Se alguém puder me ajudar eu agradeço!

Share this post

Link to post
Share on other sites

Vinicius Bazan    0

Vinicius Bazan
Posted
Em 18/07/2019 at 20:07, itlpps disse:

Cara, você não ta chamando essa função em lugar nenhum...

 

 

 Serio? Eu realmente não manjo de JS, o relógio estava indo na primeira div, achei que só de colcar a id ela chamaria, então como faço isso?

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
Go To Topic Listing Javascript

  • Similar Content

    • vmenezes
      foto pelo site salvando a imagem na raiz do site
      By vmenezes
      ola galera . tenho uma aplicação com asp  e utilizo javascript para bater foto do cliente . consigo apos a foto batida salvar no pc com o ID do cliente,
      porem gostaria que assim que a foto fosse batida salvasse na raiz do proprio site.
      tem como fazer isso ?
      obg
    • marco_fcp
      Somar valores inputs/checkbox
      By marco_fcp
      Estou tentando criar este código para quando escolher uma option no select, ele pegar nesse valor, e somar com quantos checksbox o utilizador quiser. Aí, no fim, no campo do valortotal conforme a option que escolher, irá subtrair um desconto do valor total. Penso ter feito os scripts, mas não estou a conseguir o resultado final com o desconto, dinâmico no mesmo campo.
      <!-- Pedido de Orçamento --> <div class="container-fluid mb-5"> <div class="row"> <div class="col-lg-2"></div> <div class="col-lg-8 mb-5"> <div class="caixa-orcamento pb-5"> <form action="" method="POST" onchange="atualizarPreco()" name="formulario"> <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3> <table class="m-auto"> <tr> <td class="fw-bold labels">Tipo de página web:</td> <td> <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente --> <select name="tipopagina" id="tipopagina" required> <option value="0"></option> <option value="400" id="estatica">Estática</option> <option value="500" id="dinamica" >Dinâmica</option> <option value="600" id="loja" >Loja</option> </select> </td> </tr> <tr> <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% --> <td class="fw-bold labels">Prazo em meses:</td> <td><input type="number" id="prazo"></td> </tr> </table> <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5> <!-- Cada check selecionado soma 400 ao valor total --> <div class="checkbox labels text-center mb-5"> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Quem Somos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Onde estamos <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Galeria de fotografias <br> <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">eCommerce <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Gestão Interna <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Notícias <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Redes Sociais </div> <h5 class="text-center labels">Orçamento estimado:</h5> <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p> <div class="resultado-orcamento text-center"> <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento --> <input type="text" id="valor-orcamento" name="valor-orcamento" value=""> <br> <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button> <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button> </div> </form> </div> </div> <div class="col-lg-2"></div> </div> </div> function atualizarPreco() { var preco = 0; // Tipo de página Selecionada com preços Diferentes if (document.getElementById('tipopagina').value == '400') { preco = 400; } if (document.getElementById('tipopagina').value == '500') { preco = 500; } if (document.getElementById('tipopagina').value == '600') { preco = 600; } // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%) var prazo = document.getElementById('prazo').value; if (prazo == 0) { preco = preco + 0; } else if (prazo == 1) { preco = preco - (preco * 0.05); } else if (prazo == 2) { preco = preco - (preco * 0.10); } else if (prazo == 3) { preco = preco - (preco * 0.15); } else { preco = preco - (preco * 0.20); } document.getElementById('valor-orcamento').value = preco; // Código que soma 400€ ao total por cada checkbox selecionado var soma1 = 0; function somar(check) { if ( check.checked ){ soma1 += 1*check.value; } else { soma1 -= 1*check.value; } document.getElementById("valor-orcamento").value = soma1; } }  
    • luiz monteiro
      Problemas com VUE JS
      By luiz monteiro
      Olá, tudo bem?
       
      Estou tentando colocar um evento dropdown em um template.js mas sem sucesso.
       
      O script é o seguinte
       
      const template = `
      <nav id="sidebar">

          <ul class="list-unstyled menu">
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                      Home
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                      Analytics
                  </a>
              </li>
              <li>
              <a href="#">
                  <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
                  Ações
              </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                      Controles
                  </a>
              </li>
              <li>
                  <a href="#">
                      <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                      Configurações
                  </a>
              </li>
          </ul>

          </nav>
      `
      export default {
        name: "Sidebar", 
        template,
        delimiters: ["#{", "}#"]
      }
       
       
       
       
      ============Preciso colocar um dropdown na opção Ações, algo assim
       
                      <li
                          v-for="item in items">
                          <a :href="item.url"
                             v-if="!item.children">
                              
                          </a>
                          <span
                              v-else
                              v-on:mouseover="mouseover"
                              v-on:mouseleave="mouseleave">
                              {{ item.name }}
                              
                              <ul class=" dropdown"
                                 :class="{ isOpen }">
                                  <li
                                      v-for="child in item.children">
                                      <a :href="child.url">
                                          {{ child.name }}
                                      </a>
                                  </li>
                              </ul>
                          </span>
                      </li>
       
      var nav = new Vue({
          el: '#nav',
          data: {
              isOpen: false,
              items: [
                  {
                      url: '#acoes',
                      name: 'Ações',
                      children: [
                          {
                              url: '#link1',
                              name: 'Opção 1'
                          },
                          {
                              url: '#link2',
                              name: 'Opção 2'
                          },
                          {
                              url: '#link3',
                              name: 'Opção 3'
                          },
                      ]
                  }
              ]
          },
          methods: {
              mouseover: function () {
                  this.isOpen = true;
              },
              mouseleave: function () {
                  this.isOpen = false;
              }
          }
      });
       
       
       
      Quando coloco a programação no sidebar.js, não é exibido nada na tela nem mesmo retorna erro.
       
       
      =============No index os imports estão assim
       
          <script type="importmap">
            {
              "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
              }
            }
          </script>
          <script type="module">
            import { createApp } from "vue";
            import Sidebar from "/components/sidebar.js";
            import Welcome from "/components/welcome.js";
            const app = createApp({
                delimiters: ["#{", "}#"],
                components: {
                  Welcome,
                  Sidebar
                },
                data() {
                  return {}
                },
                methods: {
                
                }
              }).mount("#wrapper");
          </script>
        </body>
       
      Agradeço desde já.
       
       
       
    • nathanmoreira
      Como formatar uma string
      By nathanmoreira
      Após diversos cálculos provindos de um código, recebo um número inteiro ao qual não sei o tamanho ao certo (pode variar de 1 pra frente). Quero passar esse número para string e formatar ele de maneira a colocar um ,00 no final e, a cada 3 números antes da virgula, um ponto. Ou seja, deixar o número num formato como: 45.114.477,00
       
      Como fazer? 
×

Important Information

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

  I accept