Rechtsdreieck - Online -Gebietsrechner
Bei drei Abmessungen berechnen die Fläche.
Wenn die Dimensionen nicht möglich sind, um ein rechtes Dreieck zu bilden, alarmieren Sie.
Inhalt
- Probieren Sie es aus
- Wie es funktioniert
- Externe Referenzen
Probieren Sie es aus
Die Website besteht aus 5 Dateien: index.html, result.php, style.css, resultsheet.css und script.js.
Laden Sie sie hier herunter.
Erstellen Sie unter Ihrem Root -Verzeichnis einen Ordner. Nennen Sie es "rechtes Dreieck". Speichern Sie diese Dateien in diesem Ordner.
Starten Sie dann einen virtuellen Server. Geben Sie in Ihrem Webbrowser diese Adresse ein: localhost/right triangle/index.html
(Angenommen, Sie verwenden XAMPP unter Windows)
Sie sind jetzt auf der Eingabeseite.
Auf der Eingabeseite sehen Sie den Titel "Right Dreieck!" Oben, drei Kreise, eine Sendel -Taste,
und eine blaue Dreifach am Ende der Seite. Diese 3 Kreise sind tatsächlich Eingangsfelder.
Versuchen Sie, die folgenden Dinge zu tun:
- Bewegen Sie Ihren Mauszeiger über einen der Kreise
- Bewegen Sie Ihren Mauszeiger über die Taste Senden
- Bewegen Sie Ihren Mauszeiger in der Nähe des Dreiecks
- Lassen Sie einen oder alle Felder leer und drücken Sie dann den Senden -Taste
- Lassen Sie kein Feld leer, aber geben Sie einen alphabetischen Charakter in einem der Felder ein und treffen
Sobald Sie damit fertig sind, versuchen Sie, Zahlen in diese 3 Kreise einzugeben und klicken Sie auf die Taste Senden.
Sie sind die Längen von Bein, Bein und Hypotenuse.
Es sollte Sie auf die Ergebnisseite umleiten. Wenn Sie 3, 4 bzw. 5 eingeben, sollten Sie erhalten
So etwas wie "Bereich: 6". Wenn Sie 10, 9 und 4 eingeben, sollten Sie so etwas wie "gegebene Abmessungen erhalten
sind nicht richtig für ein rechtes Dreieck ".
Wie es funktioniert
Wenn Sie Ihren Mauszeiger in der Nähe des Dreiecks schweben, dreht sich das Dreieck und bewegt sich nach oben, seine Farbe wird rot.
Dies geschieht durch das Styling in einem CSS -Selektor mit einer Pseudoklasse.
#Triangle: Hover {
Grenze: Solid 65px;
Grenzfarbe: transparent transparent #F12F2F transparent;
Rand: 0px;
Transformation: Drehen (180 °) Scalex (-1);
}
Beachten Sie die letzte
transform: rotate(180deg) scaleX(-1);
Dadurch dreht sich das Dreieck im Schwebedruck.
Überprüfen Sie als Nächstes die Datei script.js. Es gibt 2, wenn Aussagen darin, aus denen hervorgeht, ob die Eingaben ungültig sind.
Es überprüft, ob der Benutzer etwas eingibt, indem es mit
null
verglichen wird. Erinnern Sie sich daran, dass Null ein Datentyp ist
Was im Grunde "nichts" bedeutet.
Wir haben auch die
isNan
-Funktion, um zu überprüfen, ob die Eingänge numerisch sind. Nan steht für
N ot
a n Umber.
Wenn Sie gültige Eingänge eingeben, wird der Code in denjenigen, wenn Anweisungen nicht ausgeführt werden. JavaScript erstellt dann 3 Cookies
Mit den Namen A, B, C, die die zuvor eingereichten Eingaben speichern. Es leitet Sie dann auf die
Ergebnisseite, die result.php ist
Auf der Ergebnisseite macht PHP die Mathematik. Zunächst ruft es die Werte von Cookies auf, die von JavaScript früher erstellt wurden.
und speichern Sie diese Werte in drei Variablen, nämlich
$a
,
$b
,
$c
.
Anschließend wird der Theorem der Pythagoras verwendet, um zu prüfen, ob diese Werte (die die Dimensionen des Dreiecks sind) a
Rechtsdreieck. Wenn dies möglich ist, wird auf der Ergebnisseite den Text "Bereich" angezeigt: mit dem Bereich des Dreiecks neben dem Bereich.
Wenn dies nicht der Fall ist, zeigt die Ergebnisseite den Text an, den "angegebene Abmessungen für ein richtiges Dreieck nicht richtig sind".
Externe Referenzen
- Virtueller Server
- Keksehandling mit JavaScript
- PHPs $ _cookie
- Pythagoras 'Theorem