Codigo para medição de volume!

Item: Codigo para medição de volume!
Rating: 1

por Uatyla 28.08.18 15:22

Detalhes da questão

Endereço do fórum: http://www.vidadeaquarista.forumeiros.com
Versão do fórum: phpBB3

Descrição

Boa noite senhores!
Gostaria de saber se por ventura tem alguém aqui que entende um pouco sobre esse tipo de código http://mundoaquario.com.br/GuiaIniciante/CalculadoraVolume pois queria desenvolver um código semelhante...
esse código seria de grande ajuda para os leitores do nosso blog, então quem por ventura entender do mesmo ficaria feliz em receber ajuda...

por **tikky** 28.08.18 17:18

Olá @Uatyla,
Como visto do teu primeiro tópico com o mesmo conteúdo, certamente ninguém irá ajudar, não por não querer, mas sim pelos nossos conhecimentos limitados.

Cordialmente,
pedxz

por Uatyla 28.08.18 21:02

estou no aguardo aqui!!!

por **Fraise** 29.08.18 1:32

Olá @Uatyla,

Por mais que nós queiramos ajudar o senhor, nós não temos qualquer experiência nesse tipo de matéria. Essa função envolve formulas matemáticas e é quase impossível para nós estudar essas fórmulas, que parecem até ser um pouco aprofundadas, porque temos um tempo limitado e outros membros para atender. Espero que compreenda que o seu pedido é demasiado complexo para nós.

Eu poderei deixar o tópico ativo, mas como o meu colega Pedro já disse, duvido muito que alguém o auxilie.
Pretende que eu anule a questão...?

Até mais,
Fraise.

por Uatyla 30.08.18 0:11

como temos vários membros gostaria de manter o tópico! vai que alguém aqui entende do casa...
eu queria o mesmo para ser usado em uma pagina HTML

por MateusAnjosV 30.08.18 0:27

Clonar é a parte fácil(considerando que demorei dois minutos para isso, famoso inspecionar element):

http://heroesofolympus.forumeiros.com/h4-calculadora-pro-uatyla

Agora, fica difícil alguém se manifestar se não sabe até onde terá de ir com o projeto. O meu tempo é quase nulo, mas se não estiver com pressa, posso ajudá-lo. Apenas: seja ESPECÍFICO

por Luiz 30.08.18 2:39

É possível fazer isso em minutos usando frameworks reativos como Vue ou React.
Posso fazê-lo contanto que o senhor me disponibilize as três fórmulas matemáticas que estão sendo usadas.

Fico no aguardo. Feliz

por Uatyla 30.08.18 4:01

Luiz escreveu:É possível fazer isso em minutos usando frameworks reativos como Vue ou React.
Posso fazê-lo contanto que o senhor me disponibilize as três fórmulas matemáticas que estão sendo usadas.

Fico no aguardo.

acredito eu que a formula seja essa!

Código:: //$("#calcForm").submit(function (t) { // t.preventDefault(); // var e = {}; // $.each($("#calcForm").serializeArray(), function (t, h) { // e[h.name] = h.value // }), e.thickness || (e.thickness = 0); // var h = ((e.length - 2 * e.thickness) * (e.height - e.thickness) * (e.width - 2 * e.thickness) / 1e3).toFixed(1), // i = (h - e.length * e.width * 1.5 / 1e3).toFixed(1), // l = Math.round(.211 * h), // n = Math.round(1.321 * h), // r = e.thickness * (e.length * e.width + 2 * e.thickness * e.height + 2 * e.length * e.height), // s = Math.round(Number(h) + .0025 * r), // a = "Litres", // o = "Kilograms", // m = 5 * Number(h), // u = "Liters per hour"; // "imperial" == e.location && (h = (h * (1e3 / 231)).toFixed(1), i = (i * (1e3 / 231)).toFixed(1), a = "Gallons", s = Math.round(2.2046 * s), o = "Lbs", l = Math.round(.8 * Number(h)), n = Math.round(5 * Number(h)), s = Math.round(16.387 * s), m = 5 * Number(h), u = "Gallons per hour"), $("#volume").html("<p>" + h + "</p>"), $("#volume-beeline").html(a), $("#volumews-beeline").html(a), $("#volumeWS").html(i), $("#inches-fish").html(l), $("#inches").html("Inches"), $("#watts-heater").html(n), $("#watts").html("Watts"), $("#total-weight").html(s), $("#weight-type").html(o), $("#filtration").html(m), $("#filtration-type").html(u) //}); $(function () { eventoBotaoCalculaDadosAquario(); }); function eventoBotaoCalculaDadosAquario() { $('#btnCalcular').click(eventoCalculaDadosAquario); } function eventoCalculaDadosAquario() { var comprimento = 0; var largura = 0; var altura = 0; comprimento = $('#txtComprimento').val(); largura = $('#txtLargura').val(); altura = $('#txtAltura').val(); if (comprimento == '' || comprimento == null) { msgboxui('Aviso', 'Informe o comprimento do aquário'); return; } if (largura == '' || largura == null) { msgboxui('Aviso', 'Informe a largura do aquário'); return; } if (altura == '' || altura == null) { msgboxui('Aviso', 'Informe a altura do aquário'); return; } var volume = calculaVolume(comprimento, largura, altura); $('#spVolume').text(volume); var watts = calculaWatts(volume); $('#spWatts').text(watts); var filtro = filtragem(volume); $('#spFiltro').text(filtro); } function filtragem(volume) { return Math.round(volume * 5); } function calculaWatts(volume) { var watts = 0; if (volume < 40) watts = 25; else if (volume >= 40 && volume < 60) { watts = 50; } else if (volume >= 60 && volume < 90) { watts = 50; } else if (volume >= 90 && volume < 130) { watts = 100; } else if (volume >= 130 && volume < 190) { watts = 150; } else if (volume >= 190 && volume < 250) { watts = 200; } else if (volume >= 250 && volume < 280) { watts = 250; } else if (volume >= 280 && volume < 350) { watts = 300; } else if (volume >= 350) { var fator = volume / 350; watts = Math.round(300 * fator); } return watts; } function calculaVolume(comprimento, largura, altura) { var volume = 0; volume = Math.round(comprimento * largura * altura) / 1000; return volume; }

por Uatyla 30.08.18 4:09

Agora a formula para somar a litragem é ate simples!
comprimento (cm) X Altura(cm) X largura(cm)
dividido por 1000 = CAPACIDADE EM LITROS

segue um exemplo
130 x 60 x 50 = 390000 / 1000 = 390 litros.
ou seja multiplicamos o comprimento, altura e largura e depois dividimos por mil.

por Luiz 30.08.18 17:35

Como prometido, aqui está:

Código:: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4"> <div class="jumbotron"> <h1 class="display-4">Calculadora para Aquários</h1> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dui ut leo imperdiet finibus. Aliquam sit amet hendrerit enim, id laoreet sem. </p> <hr class="my-4" /> <p class="mb-0"> Clique <a href="/">aqui</a> para voltar ao fórum. </p> </div> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>

Você pode ver uma demonstração aqui.
Se possível, gostaria que o senhor mantivesse os créditos.

Piscada

por **tikky** 30.08.18 17:44

Uatyla escreveu:Agora a formula para somar a litragem é ate simples!
comprimento (cm) X Altura(cm) X largura(cm)
dividido por 1000 = CAPACIDADE EM LITROS

segue um exemplo
130 x 60 x 50 = 390000 / 1000 = 390 litros.
ou seja multiplicamos o comprimento, altura e largura e depois dividimos por mil.

Atenção!

Você não pode postar mensagens consecutivas ou UP's antes de se completarem 24 horas desde a sua última mensagem em um tópico.

Por este motivo, pedimos que leia as regras do Setor de Suporte e as regras do Fórum dos Fóruns para não cometer novos erros.

por Uatyla 31.08.18 1:30

Luiz escreveu:Como prometido, aqui está:
Código:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4"> <div class="jumbotron"> <h1 class="display-4">Calculadora para Aquários</h1> <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dui ut leo imperdiet finibus. Aliquam sit amet hendrerit enim, id laoreet sem. </p> <hr class="my-4" /> <p class="mb-0"> Clique <a href="/">aqui</a> para voltar ao fórum. </p> </div> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>

Você pode ver uma demonstração aqui.
Se possível, gostaria que o senhor mantivesse os créditos.

Eu gostaria de por nesta página, como faço?

Código:: <!doctype> <html lang="pt-br"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> .calculadora { margin-left: 150px !important; } .button_return a:hover { color: #00AACC; font-size: 20px; text-shadow: 0px 1px 0px #000; } .button_return:hover { background-color: #ccc; border: 2px solid #000; } .button_return { border: 1px solid #000; border-radius: 4px; padding: 10px; background-color: #ddd; color: black; } .button_return a { text-decoration: none; font-size: 18px; font-weight: bold; } body { background: url('https://i.imgur.com/RTXnstU.jpg'); background-repeat: no-repeat; } div { border-radius: 20px; } marquee { margin-top: 20px; display: block; } #login_widget { background-color: #D2DACD; width: 200px; height: 200px; float: right; border-radius: 10px; padding: 10px; text-align: center; } </style> </head> <body> <div id="login_widget"> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/h4">Login</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/register">Registrar</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/">Voltar ao fórum</a> </p> </div> <div id="slidecblogger"> <div class="slidecblogger"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> </body> </html>

por Uatyla 02.09.18 2:19

UP!
em relação ao código conseguir adapta-lo a pagina HTML do meu fórum! Uma duvida é possível adicionar uma imagem na parte wats por litro e vazão?

Código:: <!doctype> <html lang="pt-br"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> .calculadora { margin-left: 150px !important; } .button_return a:hover { color: #00AACC; font-size: 20px; text-shadow: 0px 1px 0px #000; } .button_return:hover { background-color: #ccc; border: 2px solid #000; } .button_return { border: 1px solid #000; border-radius: 4px; padding: 10px; background-color: #ddd; color: black; } .button_return a { text-decoration: none; font-size: 18px; font-weight: bold; } body { background: url('https://i.imgur.com/RTXnstU.jpg'); background-repeat: no-repeat; } div { border-radius: 20px; } marquee { margin-top: 20px; display: block; } #login_widget { background-color: #D2DACD; width: 200px; height: 200px; float: right; border-radius: 10px; padding: 10px; text-align: center; } </style> </head> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4"> <div class="jumbotron"> <h1 class="display-4">Calculadora para Aquários</h1> <p class="lead"> </p> <div id="login_widget"> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/h4">Login</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/register">Registrar</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/forum">Voltar ao fórum</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.com/">Voltar ao Blogger</a> </p> </div> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html> <body> <div id="slidecblogger"> <div class="slidecblogger"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> </body> </html> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div>

por **tikky** 02.09.18 15:01

Uatyla escreveu:UP!
em relação ao código conseguir adapta-lo a pagina HTML do meu fórum! Uma duvida é possível adicionar uma imagem na parte wats por litro e vazão?

Código:
<!doctype> <html lang="pt-br"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> .calculadora { margin-left: 150px !important; } .button_return a:hover { color: #00AACC; font-size: 20px; text-shadow: 0px 1px 0px #000; } .button_return:hover { background-color: #ccc; border: 2px solid #000; } .button_return { border: 1px solid #000; border-radius: 4px; padding: 10px; background-color: #ddd; color: black; } .button_return a { text-decoration: none; font-size: 18px; font-weight: bold; } body { background: url('https://i.imgur.com/RTXnstU.jpg'); background-repeat: no-repeat; } div { border-radius: 20px; } marquee { margin-top: 20px; display: block; } #login_widget { background-color: #D2DACD; width: 200px; height: 200px; float: right; border-radius: 10px; padding: 10px; text-align: center; } </style> </head> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4"> <div class="jumbotron"> <h1 class="display-4">Calculadora para Aquários</h1> <p class="lead"> </p> <div id="login_widget"> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/h4">Login</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/register">Registrar</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/forum">Voltar ao fórum</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.com/">Voltar ao Blogger</a> </p> </div> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html> <body> <div id="slidecblogger"> <div class="slidecblogger"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> </body> </html> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div>

Sobre a página eu fiz uma limpeza para o Senhor:

Código:: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4" style="background: url('https://i.imgur.com/RTXnstU.jpg') no-repeat;"> <div class="jumbotron text-center"> <h1 class="display-4">Calculadora para Aquários</h1> <hr class="my-4" /> <div class="row"> <div class="col-md-8"> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/h4-', '_blank')">Login</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/register', '_blank')">Registrar</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/forum', '_blank')">Voltar ao fórum</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.com/', '_blank')">Voltar ao blog</li> </ul> </div> </div> </div> <div class="mt-3"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>

Uma duvida é possível adicionar uma imagem na parte wats por litro e vazão?

Poderia mostrar com prints onde o Senhor deseja adicionar as imagens?

por Uatyla 02.09.18 22:02

Pedxz escreveu:
Uatyla escreveu:UP!
em relação ao código conseguir adapta-lo a pagina HTML do meu fórum! Uma duvida é possível adicionar uma imagem na parte wats por litro e vazão?

Código:
<!doctype> <html lang="pt-br"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> .calculadora { margin-left: 150px !important; } .button_return a:hover { color: #00AACC; font-size: 20px; text-shadow: 0px 1px 0px #000; } .button_return:hover { background-color: #ccc; border: 2px solid #000; } .button_return { border: 1px solid #000; border-radius: 4px; padding: 10px; background-color: #ddd; color: black; } .button_return a { text-decoration: none; font-size: 18px; font-weight: bold; } body { background: url('https://i.imgur.com/RTXnstU.jpg'); background-repeat: no-repeat; } div { border-radius: 20px; } marquee { margin-top: 20px; display: block; } #login_widget { background-color: #D2DACD; width: 200px; height: 200px; float: right; border-radius: 10px; padding: 10px; text-align: center; } </style> </head> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4"> <div class="jumbotron"> <h1 class="display-4">Calculadora para Aquários</h1> <p class="lead"> </p> <div id="login_widget"> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/h4">Login</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/register">Registrar</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.forumeiros.com/forum">Voltar ao fórum</a> </p> <p class="button_return"> <a href="http://vidadeaquarista.com/">Voltar ao Blogger</a> </p> </div> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html> <body> <div id="slidecblogger"> <div class="slidecblogger"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> </body> </html> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div>

Sobre a página eu fiz uma limpeza para o Senhor:
Código:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4" style="background: url('https://i.imgur.com/RTXnstU.jpg') no-repeat;"> <div class="jumbotron text-center"> <h1 class="display-4">Calculadora para Aquários</h1> <hr class="my-4" /> <div class="row"> <div class="col-md-8"> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/h4-', '_blank')">Login</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/register', '_blank')">Registrar</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/forum', '_blank')">Voltar ao fórum</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.com/', '_blank')">Voltar ao blog</li> </ul> </div> </div> </div> <div class="mt-3"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>
Uma duvida é possível adicionar uma imagem na parte wats por litro e vazão?
Poderia mostrar com prints onde o Senhor deseja adicionar as imagens?

olha já ficou perfeito assim! eu só queria tirar essa parte branca na lateral direita é possível? http://vidadeaquarista.forumeiros.com/page_html?mode=preview

por **tikky** 02.09.18 22:29

Essa é a página de demonstração Aff

Tens que salvar, ou simplesmente dizer qual é a página, desculpe fiquei Louco

por Uatyla 04.09.18 18:07

essa aqui! http://vidadeaquarista.forumeiros.com/h3-calculadora-para-calcular-o-volume-de-agua

por **tikky** 04.09.18 18:21

Mude a página para:

Código:: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4" style="background: url('https://i.imgur.com/RTXnstU.jpg') no-repeat;"> <div class="jumbotron text-center"> <h1 class="display-4">Calculadora para Aquários</h1> <hr class="my-4" /> <div class="row"> <div class="col-md-12"> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> </div> </div> <div class="mt-3"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>

por Uatyla 04.09.18 23:44

eu me refiro a essa parte aqui...
Codigo para medição de volume! GRgtAcX

por **tikky** 05.09.18 13:20

Desculpe, isso têm haver com o tamanho da tela pelo qual aqui não dava para ver essa pequena falha, mude a página para:

Código:: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body class="container py-4" style="background: url(https://i.imgur.com/RTXnstU.jpg) no-repeat;background-size: 100%;width: 100%;"> <div class="jumbotron text-center"> <h1 class="display-4">Calculadora para Aquários</h1> <hr class="my-4" /> <div class="row"> <div class="col-md-8"> <div class="card"> <header class="card-header">Calculadora</header> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/h4-', '_blank')">Login</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/register', '_blank')">Registrar</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.forumeiros.com/forum', '_blank')">Voltar ao fórum</li> <li class="list-group-item" style="cursor: pointer" onclick="window.open('http://vidadeaquarista.com/', '_blank')">Voltar ao blog</li> </ul> </div> </div> </div> <div class="mt-3"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a> </marquee> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1https://lffg.github.io" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>

por Uatyla 07.09.18 22:08

vlw funcionou certinho!
so mais uma dúvida, eu gostaria que o menu fosse padrão "horizontal" esse na vertical no pc fica top, porém no celular fica tudo bugado... Então eu posso resolver aqui mesmo, ou tenho que abrir um novo tópico?!

por **tikky** 08.09.18 15:18

Veja se assim fica perfeita:

Código:: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Calculadora para Aquários</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> </head> <body style="background: url(https://i.imgur.com/RTXnstU.jpg) no-repeat;background-size: cover;"> <main role="main" class="container py-4"> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm"> <div class="container-fluid"> <a class="navbar-brand">vidadeaquariosta.forumeiros.com</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="http://vidadeaquarista.forumeiros.com/forum">Fórum <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="http://vidadeaquarista.com/">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="http://vidadeaquarista.forumeiros.com/login">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="http://vidadeaquarista.forumeiros.com/register">Registrar</a> </li> </ul> <span class="navbar-text"> Calculadora para Aquários </span> </div> </div> </nav> <div class="jumbotron" style="border-radius: 0;"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div id="app"> <form v-show="!show" @submit.prevent="calc"> <input type="number" v-model.number="length" placeholder="Comprimento do aquário (em centímetros)" class="form-control" /> <input type="number" v-model.number="height" placeholder="Altura do aquário (em centímetros)" class="form-control mt-3" /> <input type="number" v-model.number="width" placeholder="Largura do aquário (em centímetros)" class="form-control my-3" /> <button type="submit" class="btn btn-primary btn-lg">Calcular</button> <div class="alert alert-danger mt-3 mb-0" v-show="error"> Erro: Você deve preencher todos os campos acima. </div> </form> <div v-show="show"> <dl> <dt>Volume:</dt> <dd><samp>{{ volume }}</samp></dd> <dt>Termostáto:</dt> <dd><samp>{{ thermostat }}</samp></dd> <dt>Litros por hora:</dt> <dd><samp>{{ liters }}</samp></dd> </dl> <div class="alert alert-info mb-0"> Clique <a @click.prevent="show = false" href="#" class="alert-link">aqui</a> para calcular novamente. </div> </div> </div> </div> </div> </div> </div> <div class="mt-3"> <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right"> <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"> <img style="width: 170px; height: 100px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" border="0" /> </a> <a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"> <img style="width: 170px; height: 100px;" src="https://i.servimg.com/u/f48/17/08/41/16/public12.png" border="0" /> </a> </marquee> </div> </div> <div class="card mt-3"> <div class="card-body"> Desenvolvido por <a href="https://lffg.github.io" target="_blank">Luiz Felipe F.</a> Editado Por <a href="http://vidadeaquarista.forumeiros.com/u1" target="_blank">Uatyla / Vida de Aquarista</a> </div> </div> </main> <script> new Vue({ el: '#app', data: { length: '', height: '', width: '', show: false, error: false }, methods: { calc: function () { if (this.length === '' || this.height === '' || this.width === '') { return this.error = true; } this.error = false; this.show = true; } }, computed: { volume: function () { return Math.round((this.length * this.height * this.width) / 1000); }, thermostat: function () { if (this.volume < 40) return 25; else if (this.volume >= 40 && this.volume < 90) return 50; else if (this.volume >= 90 && this.volume < 130) return 100; else if (this.volume >= 130 && this.volume < 190) return 150; else if (this.volume >= 190 && this.volume < 250) return 200; else if (this.volume >= 250 && this.volume < 280) return 250; else if (this.volume >= 280 && this.volume < 350) return 300; else return Math.round(300 * this.volume / 350) ; }, liters: function () { return Math.round(this.volume * 5); } } }); </script> </body> </html>

por Uatyla 09.09.18 1:02

tudo certo vlw!

por **tikky** 09.09.18 9:56

Tópico resolvido

Movido para "Questões resolvidas".

Codigo para medição de volume!