JavaScriptの入力値計算-フロントエンドQ&A-php.cn

JavaScriptの入力値計算

WBOY

リリース： 2023-05-27 11:40:07

オリジナル

1189 人が閲覧しました

JavaScript は、さまざまなインタラクティブな効果を実現するために使用できる、一般的に使用される Web プログラミング言語です。この記事では、JavaScriptを使用して円の半径を入力し、面積や円周を計算して出力する方法を紹介します。

1. 半径を入力します

半径の入力は、円の円周と面積を計算するための最初のステップです。これは、単純な HTML ページで実現できます。まず、半径を入力して計算を開始するためのテキストボックスとボタンを HTML ファイルに作成する必要があります。コードは次のとおりです:

<!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>

ログイン後にコピー

この HTML ページには、テキストボックスと計算ボタンが含まれています。結果を出力するために空の段落が使用されます。このうちテキストボックスのIDは「radius」で、半径の入力値を取得するために使用されます。ボタンの onclick イベントは、円の円周と面積を計算するために使用される JavaScript 関数「calculate()」にバインドされています。結果は 2 つの段落に分けて出力され、それぞれ ID が「area」と「circumference」のタグで表されます。

2. 面積と周長の計算

HTML ファイルに、「circle.js」という名前の JavaScript ファイルを導入しました。このファイルには、円の面積と円周を計算する関数を記述します。コードは次のとおりです。

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 + "厘米";
}

ログイン後にコピー

この関数には 3 つの主要なステップがあります。まず、JavaScript の DOM メソッドを使用して、テキストボックスの値、つまりユーザーが入力した円の半径を取得します。次に、PI 定数と数学ライブラリの pow() 関数を使用して円の面積を計算します。最後に、数学ライブラリと入力された半径を使用して円の円周を計算し、結果を HTML ページの 2 つの段落に出力します。この例では、面積と周囲長を文字列として出力していますが、必要に応じて書式設定することができます。

3. テストと拡張

これで、ブラウザーで HTML ファイルを開いてテストを開始できます。テキストボックスに値を入力し、「計算」ボタンをクリックすると、円の面積と円周が出力されます。次の図に示すように:

JavaScriptの入力値計算

#入力値を変更し、[計算] ボタンを複数回クリックして、計算関数の正確さをテストできます。さらに、この単純な JavaScript プログラムを拡張して、他の変数を受け入れたり出力したり、より複雑な対話型オプションをユーザーに提供したりできます。

結論

この記事では、JavaScript を使用して円の半径を入力し、その面積と円周を計算する方法を紹介しました。 JavaScript は、このような対話型操作を実行するための一般的なツールです。 HTML やその他のブラウザ API を簡単に操作できるため、Web アプリケーションや Web ページの作成がより簡単かつ楽しくなります。

以上がJavaScriptの入力値計算の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。