Ir para conteúdo
Fórum Script Brasil

Diego Henrique Guilherme

Membros
  • Total de itens

    3
  • Registro em

  • Última visita

Sobre Diego Henrique Guilherme

Diego Henrique Guilherme's Achievements

0

Reputação

  1. Ok, vou desenvolver um exemplo pra você poder mexer e modificar a teu gosto. Observação! - "Continue visitando este post regularmente, pois vou atualizar o código até que fique no ponto ideal para uso." Copie e Cole o Código abaixo, em um bloco de notas [editor de texto] e Salve com o nome que bem entender desde que tenha a extensão .html . Após salvo, abra-o arquivo no seu Navegador Web e veja como ficou o projeto até o momento. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> /* Este é um comentário em CSS */ #conteiner { width:75%; margin: 0 auto; border: thin solid teal; border-radius: 5px; padding: 20px; } form { width:75%; margin: 0 auto; } fieldset { width: 42%; padding: 50px; border: thin solid teal; border-radius: 5px; } select { color: #f00; width: 360px; height: 30px; background: white; border: thin solid silver; border-radius: 5px; } option:hover { font-weight: bold; } input { background-color: black; border: thin solid silver; border-radius: 2px; color: white; padding: 10px 25px; } input:hover { color: black; background-color: white; cursor: pointer; } #box { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } #shadow { display:none; position: absolute; top: 25%; left: 25%; width: 50%; height: 100%; z-index:2; padding: 16px; border: 1px solid gray; border-radius: 5px; background-color: white; overflow: auto; } #print { width: 75%; height: 360px; background-color: white; margin: 0 auto; padding: 20px; } big { text-align: center; } large { float: left; } small,img { float: right; display: block; } p, span { font-size: 12px; } span { color: indianred; } </style> <script> function impressora(){ var conteudo = document.getElementById('print').innerHTML; tela_impressao = window.open('about:blank'); tela_impressao.document.write(conteudo); tela_impressao.window.print(); tela_impressao.window.close(); } document.onclick = function(e) { var x = document.getElementById('box'); var y = document.getElementById('shadow'); if (x.style.display != 'box') { x.style.display='none'; y.style.display='none'; } } // Code select option in the form function Tipo(tipo) { var tipo = (tipo.value); document.getElementsByName('listTipo')[0].value = tipo; document.getElementById('tipo').textContent = tipo; console.log(tipo); } function Partida(partida) { var partida = (partida.value); document.getElementsByName('listPartida')[0].value = partida; document.getElementById('partida').textContent = partida; console.log(partida); } function Tensao(tensao) { var tensao = (tensao.value); document.getElementsByName('listTensao')[0].value = tensao; document.getElementById('tensao').textContent = tensao; console.log(tensao); } function TensaoComando(comando) { var comando = (comando.value); document.getElementsByName('listTensaoComando')[0].value = comando; document.getElementById('comando').textContent = comando; console.log(comando); } function Potencia(potencia) { var potencia = (potencia.value); document.getElementsByName('listPotencia')[0].value = potencia; document.getElementById('potencia').textContent = potencia; console.log(potencia); } function Corrente(corrente) { var corrente = (corrente.value); document.getElementsByName('listCorrente')[0].value = corrente; document.getElementById('corrente').textContent = corrente; console.log(corrente); } function validar(obj_form){ for (var i = 0; i < obj_form.elements.length; i++) { if (obj_form.elements[i].type == "text") { if (obj_form.elements[i].value == "") { alert("Por favor, Preencha o Campo: " + obj_form.elements[i].name); obj_form.elements[i].focus(); return false; break; } } } document.getElementById('box').style.display = 'block'; document.getElementById('shadow').style.display = 'block'; var tam = document.body.scrollHeight; document.getElementById('box').style.height = (15 + tam) + 'px'; return false; return true; } function aviso(inative) { var msg = (inative.options[inative.selectedIndex].value); if(msg) { window.open('https://tools.schneider-electric.com.br/modulos/regua/classe_desligamento.aspx', '', 'width=520,height=500,toolbar=no,location=no,left=150,top=100, scrollbars=no'); console.log(msg); } } </script> </head> <body> <!-- Este é um comentário em HTML --> <div id="conteiner"> <figura id="fig1"> <img src="https://2.bp.blogspot.com/_AMf-sRm3UJE/TFHeEG1mgvI/AAAAAAAAAAU/g2Fc_Qpr_4c/s200/Blog.jpg" width="200px" hieght="157px" align="left"> </figura> <h2>CÉSAR AS FILHOS</h2> <p><strong>Elétrica</strong></p> </br> <form name="calc" method="post" onSubmit="return validar(this);"> <fieldset> <legend>Escolha de Partidas de Motores</legend> <label for="campo1">Tipo de coordenação:</label></br></br> <select name="campo1" onchange="Tipo(this)"> <option value="Tipo 1" selected="selected">Tipo 1</option> <option value="Tipo 2">Tipo 2</option> <option value="Total">Total</option> </select> </br></br> <label for="campo2">Tipo de partida:</label></br></br> <select name="campo2" onchange="Partida(this)"> <option value="1" selected="selected">Direta com Disjuntor Termomagnético</option> <option value="2">Direta com Disjuntor Magnético e Relé Térmico</option> <option value="3">Inversor de Frequência</option> <option value="4">Estrela - Triângulo</option> <option value="5">Autotransformador (Compensadora)</option> <option value="6">Softstarter (Partida suave)</option> <option value="7">Direta com Integral</option> <option value="8">Direta com TeSys U</option> </select> </br></br> <label for="campo3">Tensão do Motor (V):</label></br></br> <select name="campo3" onchange="Tensao(this)"> <option value="220" selected="selected">220</option> <option value="380">380</option> <option value="440">440</option> </select> </br></br> <label for="campo4">Tensão de comando:</label></br></br> <select name="campo4" onchange="TensaoComando(this)"> <option>Se for necessário selecione ..</option> <option value="F7">110 VCA</option> <option value="M7">220 VCA</option> <option value="Q7">380 VCA</option> <option value="R7">440 VCA</option> </select> </br></br> <label for="campo5">Potência do Motor (CV):</label></br></br> <select name="campo5" onchange="Potencia(this)"> <option selected="selected">Escolher Potência ..</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7.5">7.5</option> <option value="10">10</option> <option value="12.5">12.5</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="75">75</option> <option value="100">100</option> <option value="125">125</option> <option value="150">150</option> <option value="175">175</option> <option value="200">200</option> </select> </br></br> <label for="campo6">Corrente (A):</label></br></br> <select name="campo6" onchange="Corrente(this)"> <option selected="selected">Escolher Corrente ..</option> <option value="13">13</option> <option value="17">17</option> <option value="20">20</option> <option value="31">31</option> <option value="40">40</option> <option value="54">54</option> <option value="65">65</option> <option value="75">75</option> <option value="112">112</option> <option value="138">138</option> <option value="164">164</option> <option value="195">195</option> <option value="259">259</option> <option value="320">320</option> <option value="381">381</option> <option value="450">450</option> <option value="500">500</option> <option value="675">675</option> </select> </br></br> <label for="inative">Classe de Desligamento:</label></br></br> <select name="inative" onchange="aviso(this)"> <option selected="selected">Selecione ..</option> <option value="Indisponível" selected="selected">Indisponível</option> </select> </br> </br> <hr color="teal" size="1" width="100%"/> </br> </br> <center> <input type="submit" value="Validar"> </br> <input type="hidden" name="listTipo" value="" style="color:white"> <input type="hidden" name="listPartida" value="" style="color:white"> <input type="hidden" name="listTensao" value="" style="color:white"> <input type="hidden" name="listTensaoComando" value="" style="color:white"> <input type="hidden" name="listPotencia" value="" style="color:white"> <input type="hidden" name="listCorrente" value="" style="color:white"> </center> </div> </fieldset> </form> </div> <div id="box"> </div> <div id="shadow"> <div id="print" class="conteudo"> <big>Potência ou corrente deve ser selecionada</big> </br> </br> <large>A Escolha de Partida de Motor <span id="legenda"></span></large> </br> </br> <small>* Imagem meramente ilustrativa</small> </br> </br> <img src="https://tools.schneider-electric.com.br/modulos/regua/imagens/partida_direta.jpg" align="center"> <div> <!-- Tipo de coordenação --> <p>Tipo de coordenação: <span id="tipo"></span></p> <!-- Tipo de partida --> <p>Tipo de partida: <span id="partida"></span></p> <!-- Tensão do Motor (V) --> <p>Tensão do Motor (V): <span id="tensao"></span></p> <!-- Tensão do comando --> <p>Tensão do comando: <span id="comando"></span></p> <!-- Poêtncia do Motor (CV) --> <p>Poêtncia do Motor (CV): <span id="potencia"></span></p> <!-- Corrente (A) --> <p>Corrente (A): <span id="corrente"></span></p> </div> </div> <center> </br> </br> </br> <hr color="silver" size="1" width="89%"> <input type="button" onclick="impressora();" value="Imprimir"> </center> </div> </body> </html> *** Então aqui temos uma pequena Engenharia Reversa do que você quis mostrar no link da sua pergunta. Note que ainda não está completo para o propósito final, ainda farei melhorias quanto a programação das combinações de valores Entre Tipo de Partida, Tensão e Ampéres e outros. Mas por Hoje é só!
  2. Se quiser posso te dar uma ajuda à mais, fazer um exemplo um tanto que completo para fins didático.
  3. Se tratando de uma aplicação na web, você pode muito bem começar com HTML5, CSS3 e Javascript. Isso pode te ajudar a se atualizar: HTML: http://www.macoratti.net/Cursos/html5/html5_NovosElementos.zip https://portaldesenvolvedor.com/html/introducao-ao-html5/ Javascript: https://www.codigofonte.net/scripts/javascript/tutoriais/1280_apostilha-javascript https://www.academia.edu/11637466/Apostila_JavaScript https://www.scriptbrasil.com.br/codigos/javascript/ CSS: https://w3c.br/pub/Cursos/CursoCSS3/css-web.pdf Pelo que pude perceber dessa aplicação em execução on-line, tudo é feito através da selecão de opções no formulário do documento HTML. Então você pode começar pela estrutura básica HTML: <html> <head></head> <body></body> </html> Vamos inserir entre a tag body um componente Formulário: Em seguida, incluir entre a tag form um componente select: Agora, será preciso colocar dentro da tag select os componente option: <html> <head></head> <body> <form> <select> <option>Opção 1</option> <option>Opção 2</option> <option>Opção 3</option> </select> </form> </body> </html> Após ter criado a estrutura HTML, é hora de criar um estilo de cores, letras e afins para esta estrutura e isto é feito com CSS. Mas vou me a ter somente ao necessário/essencial e peço que você busque o conhecimento sobre o assunto fazendo pesquisa na internet. w3schools tem vários exemplos de uso sobre: HTML, CSS e Javascript A LÓGICA FICA POR CONTA DO JAVASCRIPT Para executar uma função quando seleciona um item option dentro do select do form, você pode se utilizar da linguagem javascript. Por exemplo: Executar uma função sem a necessidade de clicar num botão depois de selecionar uma opção. Nesse caso, primeiro você cria a função javascript. Após, você chama ela no evento onchange do elemento select. Quando uma nova opção for selecionada, dispara o evento onchange, que faz a chamada para a função escolheuItem(). Segue código de exemplo: Javascript: <script> function escolheuItem(elemento) { // Caso você queira extrair o texto e não o valor do value="item A" // Basta sustituir o "value" por "text" ou "textContent" ou ainda "innerHTML" // Fica assim: window.alert(elemento.text) alert(elemento.value); } </script> HTML: <select name="teste" onchange="escolheuItem(this);"> <option value="item A">Opção 1</option> <option value="item B">Opção 2</option> <option value="item C">Opção 2</option> </select> A lógica para tal feito pode ser conseguido com poucas linhas de codificação em Javascript. Embora, no site original a linguagem utilizada em partes foi asp, isso nos mostra que não foi inteiramente codificada só do lado cliente, e sim boa parte do lado do servidor(Para onde são enviado as opções do formulário, processado, e retorna o resultado final). Mas nada que nos impede de fazer uma engenharia reversa afim de obter o mesmo propósito que nos traz o resultado por uma imagem ilustrativa como resposta do qual cada resultado esta associada a uma seleta combinação entre si. Mas também pode se desenvolver tal aplicação similar com outros tipos de linguagens de programação. Basta utilizar a criatividade aliada ao nível de conhecimento que se tem numa certa linguagem de máquina e, esta pode ser tanto de -; "alto nível" -ou- "baixo nível" (isto é, linguagens de script ou de compilação). Após escolher o tipo de linguagem a ser estudada, é só soltar a imaginação e pensar no que se pode fazer com ela .. surgir-se assim uma idéia de um programa. Agora, é a hora de definir qual será a lógica deste programa (imagine como ele vai se comportar, faça um esboço(desenhe janelas, campos de texto, botões, adicione imagem) e escreva um roteiro a ser seguido e depois é abrir um editor de texto e codificar e testar, testar e testar novamente, até que funcione conforme o planejado.
×
×
  • Criar Novo...