Ir ao conteúdo
  • Cadastre-se
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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×