[Resolvido] Carrinho de compra com barra

Sacomé · Novembro 27, 2011

Ai galera não sou muito bom em matematica, mas, estou com um carrinho de compras pronto do tipo que o cliênte compra coisas com créditos que tem uma barra pra mostrar quanto ele já gastou de x creditos, tem que ser com barra entende.

A Barra:

Suponha que você tem 50 créditos.

Ah!, lembrando que a barra tem 150px de largura igualmente um fundo com a mesma largura.

Então preciso mostrar:

________________________

________________________| Fundo

-------- Barra

Mas não consigo com 50 / 150(que é o tamanho da barra total) e nem com 50 * 100 / 150 no caso do css ficar com porcentágem

A barra poderá ser com porcentágem ou pixels

--10%

----20% etc.

--10px;

----20px; etc.

Leonardo Leal · Novembro 27, 2011

Seguinte cara, acho que o que tu quer é aquele esquema que aprendemos la no ensino fundamental... REGRA DE TRÊS.

300 créditos --> 150 px

50 créditos --> ? px

300 * x = 150 * 50

x = 7500 / 300

x = 25

X = 25px

É isto?

Sacomé · Novembro 27, 2011

300 * x = 150 * 50

x = 7500 / 300

x = 25

X = 25px

Leo, eu preciso que a barra fique 150 de tamanho quando o cara atingir o limite de créditos, ou seja a soma seria mais ou menos assim:

creaditos / peloTamanhoDaBarra,

50 / 150;

150 / 150;

Outra coisa quando a variável é menor tem ser X(vezes) e quando maior /(divisão) ou vice e versa

Isso ai é facinho mais 50 / 150 é 0,333333333333333333333333, e se eu usar Math.Round() vai retornar é claro 0

Então teria que ser 50 * 150 que vai ser 7500 / 150 = 50 ou seja nada a ver, por aí a barra ia fica com 50 px, beleza, mas, e se for ex: 700 créditos (limite) : 700 / 100 * 150 = 1050 ou seja a barra ia ficar com 1050px

eu preciso que qualquer valor seja dividido pelo o que ele já gastou de 700 por ex: e mostra no tamanho da barra

Leonardo Leal · Novembro 27, 2011

Bem, vamos supor que o cliente possua um total de 3500 créditos, e gastou 1190 créditos o que equivale a 34% da barra preenchida.

Vamos aos calcúlos.

3500 créditos (total) equivale a 100% (tamanho da barra)

1190 créditos equivale x%

3500 * x = 100 * 1190

3500 * x = 119000

x = 119000 / 3500

x = 34

x = 34%

Isto é você tem que preencher 34% do total da barra

<div class="barra" style="width:150px;height:30px">
 <div class="barra_preenche" style="width:34%;height:30px"></div>
</div>

Quer o resultado em pixels?

3500 créditos (total) equivale 150px

1190 créditos equivale Xpx

3500 * x = 150 * 1190

3500 * x = 178500

x = 178500 / 3500

x = 51

x = 51px

E então tu manda a barra interna ter 51px de width.

Pelo que eu entendi da lógica é isto.

Quanto ao código javascript e a linguagem serverside para pegar os valores ta tranquilo?

Sacomé · Novembro 27, 2011

3500 créditos (total) equivale a 100% (tamanho da barra)

1190 créditos equivale x%

3500 * x = 100 * 1190

3500 * x = 119000

x = 119000 / 3500

x = 34

x = 34%

Cara javascript não aceita esse tipo de sintaxe da matemática.

Pensa assim:

var total=3500;

var x=1190;

Do jeito que você fez seria:

total * x = 100 * a;

total * x = total;

x = total / x;

total = total * x;

total = 100 * x;

total = total * x;

x = total / x;

Leonardo Leal · Novembro 27, 2011

Cara javascript não aceita esse tipo de sintaxe da matemática.

Exatamente!! Não aceita mesmo...

Ali é só a lógica, a matemática.

<html>
<head>
<script type="text/javascript">
   function preencheBarra()
   {
       var total;
       var creditos;
       var barraPreenchida;

       total = 3500;
       creditos = 1190;

       barraPreenchida = (creditos * 100) / total;

       document.getElementById('barra').style.width = barraPreenchida + "%";
   }
</script>
</head>
<body onLoad="preencheBarra()">
<div id="fundo" style="width:150px;height:30px;background-color:#000">
 <div id="barra" style="width:0px;height:30px;background-color:#c00"></div>
</div>
</body>
</html>

...

Editado: Adicionei evento onLoad e cor nas barras.

Sacomé · Novembro 27, 2011

Leo, vi que você está tentando me ajudar e até escreveu bastante mas, não vamos a lugar algun porque isto não está se encaixando no sistema original. Explicando:

No sistema de carrinho de compra que eu tenho tem isto então pensei em adaptar o mesmo sistema de barra para outra coisa e então perguntei aqui como se fosso para o carrinho mas vi que são diferente um do outro.

Não tem aquele sistema da locadora? Beleza é pra ele, mas, pensei que o sistema do carrinho ia resolver mas é coisa diferente: Você já contribuiu muito obrigado mas, não está funcionando, então esquece o carrinho porque só da certo para o carrinho e vamos a locadora:

O cara tem monitores de cristal líquido na locadora daqueles de banco, este monitor é um tipo de catalogo de filmes, onde os filmes ficam no banco que eu falei na questão lá no PHP, as pessoas escolhem os filmes na tela. Na tela do monitor eu desenvolvi um sistema de votação nos filmes onde as pessoas podem votar nos filmes, votos negativos e votos positivos, até ai tudo bem, mais esse negocio de fica apenas em: X Votos positivos e Y Votos negativos é fraco então quero colocar uma barra, pensei que o outro meu sistema do carrinho iria resolver mas é diferente.

Ah!, é igualzinho ao youtube, num tem aquela barra em baixo do vídeo, então, já tenho design pronto não precisa se preocuparem, é apenas o javascript mesmo que preciso, puro sem função mesmo.

Olha tenho duas barras uma pra mostrar os votos positivos e outra pra mostrar os votos negativos, uma com float:left; e outra com float:right; e em baixo dela fica a barra 150px que é o fundo que na verdade é um <ul> e está assim:

<div>
<ul ex="fundo cinza">
 <span class="positivo"> fundo sei lá: verde </span>
 <span class="negativo"> fundo vermelho </span>
</ul>
</div>
// Se não tiver votos as barras ficam com display none e apenas aparece o fundo cinza.

Preciso que as duas barras sejam iguais ao tamanho do fundo que é 150px;

Ex:


<script>

var gosteiDoFilme=50; // 50 pessoas gostaram deste filme
var naoGosteiDoFilme = 30 // 30 Pessoas não gostou deste filme da locadora



</script>

Entendeu eu queria que uma barra mostrasse o tamanho de votos positivos e a outra barra mostrasse o tanto em tamanho de votos negativos mas que as duas ficasse dentro de 150px; assim como nos vídeos do youtube;

Cara já garanti isto pro cara da locadora tenho que consegui nem que eu tenha que ficar sem cabelo

Sacomé · Novembro 28, 2011

[ RESOLVIDO ] Eu apenas usei a mesma lógica que uso para criar loadbar.

Um valor maior não trará o esperado se dividido por um menor, se não deve-se mudar a sintaxe.

Como não sabemos os valores então não podemos adivinhar qual é o maior e qual é o menor, então, vamos usar uma sintaxe que agente já usa muito no PHP

<script>
var valor1 = x;
var valor2 = y;

valorMaior=valor1 > valor2 ? valor1: valor2;
valorMenor=valor2 < valor1 ? valor2: valor1;

var ASoma=(valorMenor / valorMaior) * 100;

wrt=function(){c("cageLanguage").cage("objectdiv, innerdiv, probgcolor").htmlWidth(ASoma+"%"):cage()}

</script>

Arquivado

[Resolvido] Carrinho de compra com barra

Recommended Posts

Sacomé 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leonardo Leal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sacomé 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leonardo Leal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sacomé 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leonardo Leal 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sacomé 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sacomé 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante