Triângulo certo - Calculadora de Área Online
Dadas três dimensões - comprimentos de 2 pernas e comprimento de hipotenusa, respectivamente, calcule a área.
Se as dimensões não forem possíveis para formar um triângulo certo, alerta.
Conteúdo
- Experimente
- Como funciona
- Referências externas
Experimente
O site consiste em 5 arquivos: index.html, resultado.php, style.css, resultheet.css e script.js.
Faça o download aqui.
Sob seu diretório raiz, crie uma pasta. Nomeie -o "Triângulo certo". Salve esses arquivos nessa pasta.
Em seguida, inicie um servidor virtual. No seu navegador da web, insira este endereço: localhost/triângulo direito/index.html
(Assumindo que você está usando o XAMPP no Windows)
Agora você está na página de entrada.
Na página de entrada, você verá o título "Triângulo certo!" no topo, três círculos, um botão de envio,
e um triângulo azul na parte inferior da página. Esses 3 círculos são na verdade campos de entrada.
Tente fazer as seguintes coisas:
- Passe o cursor do seu mouse sobre um dos círculos
- Passe o cursor do seu mouse sobre o botão Enviar
- Passe o cursor do seu mouse perto do triângulo
- Deixe um ou todos os campos vazios e depois pressione o botão Enviar
- Não deixe o campo vazio, mas insira um caráter alfabético em um dos campos e depois pressione o envio
Depois de terminar, tente inserir números nesses 3 círculos e pressionar o botão Enviar.
Eles são os comprimentos da perna, perna e hipotenusa, respectivamente.
Deve redirecioná -lo para a página de resultado. Se você inserir 3, 4 e 5, respectivamente, deve obter
Algo como "Área: 6". Se você inserir 10, 9 e 4, deve obter algo como "Dadas as dimensões
não são adequados para um triângulo certo ".
Como funciona
Quando você passa o cursor do mouse perto do triângulo, o triângulo gira e se move para cima, sua cor se transforma em vermelho.
Isso é feito por seu estilo em um seletor CSS com uma aula de pseudo.
#Triangle: Hover {
Fronteira: sólida 65px;
cor de borda: transparente transparente #f12f2f transparente;
Margin-top: 0px;
Transform: gire (180deg) escala (-1);
}
Observe a última
transform: rotate(180deg) scaleX(-1); o que faz o triângulo girar no mouse.
Em seguida, verifique o arquivo script.js. Existem 2 declarações se, o que informa se as entradas são inválidas.
Ele verifica se o usuário inseriu algo comparando -o a
null . Lembre -se de que Null é um tipo de dados
o que basicamente significa "nada".
Também temos a função
isNan para verificar se as entradas são numéricas. Nan significa
N OT
A N UMBER.
Se você inserir entradas válidas, o código nessas declarações se não será executado. JavaScript então cria 3 cookies
Com os nomes A, B, C, respectivamente, que armazenam as entradas que você enviou anteriormente. Então o redireciona para o
Página de resultados, que é resultado.php
Na página de resultado, o PHP faz a matemática. Primeiro, ele chama os valores dos cookies que foram criados por JavaScript anteriormente,
e armazene esses valores em três variáveis, ou seja,
$a ,
$b ,
$c Em seguida, ele usa o teorema de Pitágoras para verificar se esses valores (que são as dimensões do triângulo) podem criar um
Triângulo direito. Se puderem, a página de resultado exibe o texto "área:" com a área do triângulo ao lado.
Se não puderem, a página de resultado exibe o texto "as dimensões dadas não são adequadas para um triângulo certo".
Referências externas
- Servidor virtual
- Manipulação de biscoitos com JavaScript
- PHP's $ _cookie
- Teorema de Pitágoras
