Heim > Artikel > Web-Frontend > Berechnung des JavaScript-Eingabewerts

Berechnung des JavaScript-Eingabewerts

WBOYOriginal: 2023-05-27 11:40:071141Durchsuche

JavaScript ist eine häufig verwendete Web-Programmiersprache, mit der sich verschiedene interaktive Effekte erzielen lassen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Radius eines Kreises eingeben und anschließend dessen Fläche und Umfang berechnen und ausgeben.

1. Geben Sie den Radius ein

Die Eingabe des Radius ist für uns der erste Schritt zur Berechnung des Umfangs und der Fläche eines Kreises. Dies kann mit einer einfachen HTML-Seite erreicht werden. Zuerst müssen wir in einer HTML-Datei ein Textfeld und eine Schaltfläche erstellen, um den Radius einzugeben und die Berechnung zu starten. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>求圆面积和周长</title>
</head>
<body>
    <p>请输入圆的半径：</p>
    <input type="number" id="radius"></input>
    <button onclick="calculate()">计算</button>
    <p id="area"></p>
    <p id="circumference"></p>
    <script src="circle.js"></script>
</body>
</html>

Diese HTML-Seite enthält ein Textfeld und eine Berechnungsschaltfläche , und Zur Ausgabe der Ergebnisse wird ein Absatz mit zwei Leerzeichen verwendet. Unter diesen ist die ID des Textfelds „Radius“, mit der der Eingabewert für den Radius ermittelt wird. Das onclick-Ereignis der Schaltfläche ist an eine JavaScript-Funktion „calculate()“ gebunden, mit der Umfang und Fläche eines Kreises berechnet werden. Die Ergebnisse werden in zwei Absätzen ausgegeben, dargestellt durch Tags mit den IDs „area“ bzw. „circumference“.

2. Fläche und Umfang berechnen

In der HTML-Datei haben wir eine JavaScript-Datei mit dem Namen „circle.js“ eingeführt. In dieser Datei schreiben wir Funktionen zur Berechnung der Fläche und des Umfangs eines Kreises. Der Code lautet wie folgt:

function calculate() {
    var radius = document.getElementById("radius").value;

    // 计算面积
    var area = Math.PI * Math.pow(radius, 2);
    document.getElementById("area").innerHTML = "面积: " + area + "平方厘米";

    // 计算周长
    var circumference = 2 * Math.PI * radius;
    document.getElementById("circumference").innerHTML = "周长: " + circumference + "厘米";
}

Diese Funktion besteht aus drei Hauptschritten. Zunächst werden die DOM-Methoden von JavaScript verwendet, um den Wert des Textfelds abzurufen, bei dem es sich um den Radius des vom Benutzer eingegebenen Kreises handelt. Anschließend berechnet es die Fläche des Kreises mithilfe der PI-Konstante und der Funktion pow() aus der Math-Bibliothek. Schließlich berechnet es mithilfe der Math-Bibliothek und des eingegebenen Radius den Umfang des Kreises und gibt die Ergebnisse in zwei Absätzen einer HTML-Seite aus. In diesem Beispiel geben wir die Fläche und den Umfang als Zeichenfolgen aus, Sie können diese jedoch nach Bedarf formatieren.

3. Testen und Erweitern

Wir können nun die HTML-Datei im Browser öffnen und mit dem Testen beginnen. Geben Sie einen Wert in das Textfeld ein und klicken Sie dann auf die Schaltfläche „Berechnen“. Die Seite gibt dann die Fläche und den Umfang des Kreises aus. Wie unten gezeigt:

Berechnung des JavaScript-Eingabewerts

Sie können versuchen, den Eingabewert zu ändern und mehrmals auf die Schaltfläche „Berechnen“ klicken, um die Richtigkeit der Berechnungsfunktion zu testen. Darüber hinaus können Sie dieses einfache JavaScript-Programm erweitern, um andere Variablen zu akzeptieren und auszugeben oder dem Benutzer komplexere interaktive Optionen bereitzustellen.

Fazit

In diesem Artikel haben wir vorgestellt, wie man mit JavaScript den Radius eines Kreises eingibt und dessen Fläche und Umfang berechnet. JavaScript ist ein gängiges Werkzeug zur Durchführung solcher interaktiver Vorgänge. Es kann problemlos HTML und andere Browser-APIs manipulieren, was das Schreiben von Webanwendungen und Webseiten einfacher und unterhaltsamer macht.

Das obige ist der detaillierte Inhalt vonBerechnung des JavaScript-Eingabewerts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 常量 math 字符串 JS 事件 dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So rufen Sie CSS aufNächster Artikel：So rufen Sie CSS auf

In Verbindung stehende Artikel

Mehr sehen