Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Jones Gabriel

Cálculos automáticos

Recommended Posts

Boa tarde, galera, sou novo aqui no fórum e to com uma pequena dúvida.

 

To criando um site para um amigo meu e nele eu to colocando a medida automática de metro². será um site de venda de adesivos e essas coisas.

 

tenho esse código.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>

<link rel="stylesheet" type="text/css" href="teste.css">

</head>
<body>
<div class="table-prod">
<div class="form">

<div class="text-menu">
Banner
</div>
<form id="teste" name="teste" action="teste.php" method="post">

Largura (m): <input class="input-text" type="text" id="largurabanner" name="largura" onkeyup="calculabanner()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"  />

  x Altura (m):
 <input type="text" class="input-text" id="alturabanner" name="altura" onkeyup="calculabanner()" style="width:55px" value="Ex 1.5" onfocus="this.value='';" />
 
 
 <div id="mostra1"></div>
 
 
</form>

</div></div>







<br><br>

<div class="table-prod">

<div class="form">
<div class="text-menu">
Lona
</div>
<form id="teste" name="teste" action="teste.php" method="post">

Largura (m): <input class="input-text" type="text" id="larguralona" name="largura" onkeyup="calculalona()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"/>

  x Altura (m):
 <input type="text" class="input-text" id="alturalona" name="altura" onkeyup="calculalona()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"/>
 
 
 <div id="mostra"></div>
 
 
</form>

</div></div>








<br><br>

<div class="table-prod">
<div class="form">
<div class="text-menu">
Placa
</div>
<form id="teste" name="teste" action="teste.php" method="post">

Largura (m): <input class="input-text" type="text" id="larguraplaca" name="largura" onkeyup="calculaplaca()" style="width:55px" value="Ex 1.5" onfocus="this.value='';"  />

  x Altura (m):
 <input type="text" class="input-text" id="alturaplaca" name="altura" onkeyup="calculaplaca()" style="width:55px" value="Ex 1.5" onfocus="this.value='';" />
 
 
 <div id="mostra2"></div>
 
 
</form>


</div></div>

<script type="text/javascript" src="valores.js"></script>
<script type="text/javascript" src="resultados.js"></script>


</body>
</html>

Tenho os java.

 

// JavaScript Document



valorpormetro=12.00;
function calculaplaca(){
    var l=parseInt(document.getElementById('larguraplaca').value,10)||0,
    a=parseInt(document.getElementById('alturaplaca').value,10)||0,
    valor=(l*a*valorpormetro*100)+'';
    valorformatado=valor.substr(0,valor.length-2)+','+valor.substr(valor.length-2,2);
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra2').innerHTML="Total: "+l*a+"m² - R$ "+valorformatado;
    
    
};


valorpormetro=32.00;
function calculabanner(){
    var l=parseInt(document.getElementById('largurabanner').value,10)||0,
    a=parseInt(document.getElementById('alturabanner').value,10)||0,
    valor=(l*a*valorpormetro*100)+'';
    valorformatado=valor.substr(0,valor.length-2)+','+valor.substr(valor.length-2,2);
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra1').innerHTML="Total: "+l*a+"m² - R$ "+valorformatado;
    
    
};


valorpormetro=62.00;
function calculalona(){
    var l=parseInt(document.getElementById('larguralona').value,10)||0,
    a=parseInt(document.getElementById('alturalona').value,10)||0,
    valor=(l*a*valorpormetro*100)+'';
    valorformatado=valor.substr(0,valor.length-2)+','+valor.substr(valor.length-2,2);
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra').innerHTML="Total: "+l*a+"m² - R$ "+valorformatado;
    
    
}


e resultados

// JavaScript Document



function calculaplaca(){
    var l=parseFloat(document.getElementById('larguraplaca').value.replace(/,/g,"."))||0,
    a=parseFloat(document.getElementById('alturaplaca').value.replace(/,/g,"."))||0,
    valor=Math.round(l*a*valorpormetro*100)+'';
    valorformatado=valor.replace(/(\d{2})$/,",$1"),
    i=valorformatado.length-6;
    while(i>0){
        valorformatado=valorformatado.substr(0,i)+'.'+valorformatado.substring(i,valorformatado.length);
        i-=3;
    }
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra2').innerHTML="Total: "+Math.round(l*a*1000)/1000+"m² - R$ "+valorformatado;
};






function calculabanner(){
    var l=parseFloat(document.getElementById('largurabanner').value.replace(/,/g,"."))||0,
    a=parseFloat(document.getElementById('alturabanner').value.replace(/,/g,"."))||0,
    valor=Math.round(l*a*valorpormetro*100)+'';
    valorformatado=valor.replace(/(\d{2})$/,",$1"),
    i=valorformatado.length-6;
    while(i>0){
        valorformatado=valorformatado.substr(0,i)+'.'+valorformatado.substring(i,valorformatado.length);
        i-=3;
    }
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra1').innerHTML="Total: "+Math.round(l*a*1000)/1000+"m² - R$ "+valorformatado;
};




function calculalona(){
    var l=parseFloat(document.getElementById('larguralona').value.replace(/,/g,"."))||0,
    a=parseFloat(document.getElementById('alturalona').value.replace(/,/g,"."))||0,
    valor=Math.round(l*a*valorpormetro*100)+'';
    valorformatado=valor.replace(/(\d{2})$/,",$1"),
    i=valorformatado.length-6;
    while(i>0){
        valorformatado=valorformatado.substr(0,i)+'.'+valorformatado.substring(i,valorformatado.length);
        i-=3;
    }
    if(valor=='0')valorformatado='00,00';
    document.getElementById('mostra').innerHTML="Total: "+Math.round(l*a*1000)/1000+"m² - R$ "+valorformatado;
}








até então tudo beleza, eles fazem a leitura, só que todos os campos que eu coloco a numeração ele aparece sempre a do valor de "Calculolona" e os outros de cima ele não mostra nos outros campos.

 

o CSS. 

@charset "utf-8";
/* CSS Document */

.form {
    margin: 0 66px 0 30px;
	font-family:Tahoma, Geneva, sans-serif;
	}

.input-text {
    padding: 15px 16px;
    border: 1px solid #ccc;
    width: 100%;
    height: 7px;
    display: compact;
    border-radius: 4px;
    font-size: 15px;
    color: #aaa;
    margin: 0 0 15px 0;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.input-text:focus {
    border: 1px solid #fff;
    outline: 0;
	color:#090;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.3);
}

.text-menu {
	color:#009;
	font-family:"Times New Roman", Times, serif;
	font-size:36px;
	}
	
.table-prod {
	border: 1px solid #CCC;
	padding: 15px 15px 15px 15px;
	width: 550px;
}

Aguardo um retorno galera, obrigado desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jones Gabriel Olá

poderia dar mais informações?

Por exemplo qual é a fórmula de cálculo que estás usando, olhando para seus códigos parece um tanto confuso. podemos reduzir isso. Mas precisamos das informações.

 

Como por exemplo o valor do metro, altura e largura... e a formúla  para encaixar os dados. 

Com jQuery você faz isso tudo com menos linhas!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×