Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Vinicius Bazan

Ajuda em javascript

Recommended Posts

 Estou tendo um problema em elaborar o meu código com javascript, estou fazendo um teste em html e css simples pra depois elaborar um website, o objetivo aqui é fazer um relógio pelo JS e ter um contador em baixo desse relógio que vai pegar valores a partir de um switch para esse contador funcionar, isso porque se trata de dados sobre tipos de agressões contra as mulheres, então os cases do switch tem o dado em segundos para executar a formula, uma mensagem inicial e uma mensagem final.

 O usuário teria dois botões, um de cada lado (nesse caso estou usando 2 div com as ID's #btd e #bte, ao apertar esses botões aumentaria o valor de uma variável em +1 ou -1 e isso faria o switch escolher outro case e trocar os dados do contador, mas os dados não são trocados, mantendo as informações iniciais.

 Ao todo tem 4 funções, a função relogio()contador()btd() e bte(), sendo que a btd e bte estão dentro da contador() 

 Estou colocando o codigo dentro do spoiler, se alguém puder me ajudar a achar alguma solução agradeço

 

OBS: Eu nem sei se pode ter uma function dentro da outra, mas como estou aprendendo JS ainda, imagino que assim como outras estruturas (If, Else, Switch, etc...) possa ser possível colocar uma função dentro da outra.

 

Spoiler



<!DOCTYPE html>
<html>
<head>
 <title>javascript</title>
 <meta charset="utf-8">
 
 <style type="text/css">
  #relogio {
   font:bold 28pt arial;
   display: inline-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: inline-block;
   margin: 100px auto;
   padding: 30px;
   background-color: #FFFF00;
   width: 500px;
   border-radius: 6px;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

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

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

  }

 </style>
</head>
<body onload="relogio()">
<center>
<div id="relogio">
</div>
</center>
<hr>
<center>
<div id="bte" onclick="bte()"></div>
<div id="contador"> </div>
<div id="btd" onclick="btd()"></div>
</center>
<script type="text/javascript">
 
  var data = new Date()
   var horas = data.getHours()
   var minutos = data.getMinutes()
   var segundos = data.getSeconds()
   var nh = Number(horas.value)
   var nm = Number(minutos.value)
   var ns = Number(segundos.value)
   var rel = (((nh*60+nm)*60+ns)-((nh*60+nm)*60+ns%5))/5

  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) {
    minutos = "0"+minutos
   }
   if (segundos < 10) {
    segundos = "0"+segundos
   }

   document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos
  }
  window.setInterval("relogio();",1000)

  
    var tipo = Number(0)
  function contador() {

    function btd() {
        tipo = tipo+1
        if (tipo >= 12) {
            tipo = Number(0)
        }  
    }
    function bte() {
         tipo = tipo-1
        if (tipo <= -1) {
            tipo = Number(11)
        }
    }

    switch (tipo) {
        case 0:
            sd = Number(2)
            viol = '<p> A cada 2 segundos, uma mulher é vítima de violência física ou verbal </p>'
            viol2 = '<p> mulheres já foram agredidas física ou verbalmente hoje. </p>'
            break;
        case 1:
            sd = Number(2.6)
            viol = '<p> A cada 2,6 segundos, uma mulher é vítima de ofensa verbal </p>'
            viol2 = '<p> mulheres já foram ofendidas verbalmente hoje. </p>'
            break;
        case 2:
            sd = Number(6.3)
            viol = '<p> A cada 6,3 segundos, uma mulher é vítima de ameaça de violência </p>'
            viol2 = '<p> mulheres já foram ameaçadas hoje. </p>'
            break;
        case 3:
            sd = Number(6.9)
            viol = '<p> A cada 6,9 segundos, uma mulher é vítima de perseguição </p>'
            viol2 = '<p> mulheres já foram perseguidas hoje. </p>'
            break;
        case 4:
            sd = Number(7.2)
            viol = '<p> A cada 7,2 segundos, uma mulher é vítima de violência física </p>'
            viol2 = '<p> mulheres já foram agredidas físicamente hoje. </p>'
            break;
        case 5:
            sd = Number(120)
            viol = '<p> A cada 2 minutos, uma mulher é vítima de arma de fogo </p>'
            viol2 = '<p> mulheres já foram atingidas por tiros hoje. </p>'
            break;
        case 6:
            sd = Number(16.6)
            viol = '<p> A cada 16,6 segundos, uma mulher é vítima de ameça com arma de fogo ou faca </p>'
            viol2 = '<p> mulheres já foram ameaçadas por armas de fogo ou facas hoje. </p>'
            break;
        case 7:
            sd = Number(22.5)
            viol = '<p> A cada 22,5 segundos, uma mulher é vítima de espancamento ou tentativa de enforcamento </p>'
            viol2 = '<p> mulheres já foram espancadas ou sofreram tentativa de estrangulamento hoje. </p>'
            break;
        case 8:
            sd = Number(1.4)
            viol = '<p> A cada 1,4 segundos, uma mulher é vitima de assédio </p>'
            viol2 = '<p> mulheres já foram assediadas hoje. </p>'
            break;
        case 9:
            sd = Number(1.5)
            viol = '<p> A cada 1,5 segundos, uma mulher é vítima de assédio na rua </p>'
            viol2 = '<p> mulheres já foram assediadas na rua hoje. </p>'
            break;
        case 10:
            sd = Number(4.6)
            viol = '<p> A cada 4,6 segundos, uma mulher é vítima de assédio no trabalho </p>'
            viol2 = '<p> mulheres já foram assediadas no trabalho hoje. </p>'
            break;
        case 11:
            sd = Number(6.1)
            viol = '<p> A cada 6,1 segundos, uma mulher é vítima de assédio físico no transporte público </p>'
            viol2 = '<p> mulheres já sofreram assédio físico no transporte público hoje. </p>'
            break;
    }

   var data = new Date()
   var horas = data.getHours()
   var minutos = data.getMinutes()
   var segundos = data.getSeconds()
   var nh = Number(horas)
   var nm = Number(minutos)
   var ns = Number(segundos)
   var rel = (((nh*60+nm)*60+ns)-(((nh*60+nm)*60+ns)%sd))/sd
   if (rel < 10) {
     rel = `0000${rel}`
   } 
    else {
    if (rel < 100) {
     rel = `000${rel}`
    }
    else {
    if (rel < 1000) {
     rel = `00${rel}`
    }
    else {
    if (rel < 10000) {
     rel = `0${rel}`
    }
    }
    }
    }
  
    window.document.getElementById('contador').innerHTML = `${viol} <p>${rel}</p> ${viol2}`
  }
  window.setInterval('contador()',0000)
  
 </script>
</body>
</html>


 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.