JavaScriptで変換温度を書く-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptで変換温度を書く

PHPz

May 26, 2023 pm 05:21 PM

日常生活では、摂氏を華氏に変換する必要がよくあります。この機能は、JavaScript を使用してコードを記述することで簡単に実現できます。この記事では、JavaScript を使用して簡単な温度変換プログラムを作成する方法を説明します。

ステップ 1: HTML ページ

まず、ユーザーが温度値を入力して変換を実行できるように、HTML ページを作成する必要があります。以下は HTML コードです:

<!DOCTYPE html>
<html>
<head>
    <title>温度转换器</title>
</head>
<body>
    <h1 id="温度转换器">温度转换器</h1>
    <form>
        <label>输入要转换的温度：</label>
        <input type="text" id="temperature">
        <br><br>
        <input type="radio" name="converter" value="celsius">摄氏度转华氏度
        <input type="radio" name="converter" value="fahrenheit">华氏度转摄氏度
        <br><br>
        <input type="button" value="转换" onclick="convertTemperature()">
    </form>
    <br>
    <p id="result"></p>
</body>
</html>

上記のコードには、タイトルと、入力ボックス、ラジオボタン、「変換」ボタンを含むフォームが含まれています。変換された結果を表示するための段落をページの下に追加しました。

ステップ 2: JavaScript 関数

次に、ユーザーが「変換」ボタンをクリックしたときに温度変換を実行する JavaScript 関数を記述する必要があります。以下は JavaScript コードです:

function convertTemperature() {
    var input = document.getElementById("temperature");
    var temperature = input.value;
    var radio = document.getElementsByName("converter");
    var result = document.getElementById("result");

    if (radio[0].checked) {
        var fahrenheit = (temperature * 9 / 5) + 32;
        result.innerHTML = temperature + " 摄氏度 = " + fahrenheit + " 华氏度";
    } else {
        var celsius = (temperature - 32) * 5 / 9;
        result.innerHTML = temperature + " 华氏度 = " + celsius + " 摄氏度";
    }
}

上記のコードは、getElementById、getElementsByName、および innerHTML 関数を使用して、ユーザーが入力した温度値を取得し、ユーザーが選択した変換タイプを取得し、変換結果を表示します。

ユーザーが「摂氏から華氏へ」を選択した場合、プログラムはデータ型数値型を置き換えて変数温度に割り当て、入力値に 9/5 を乗算して 32 を加算して、対応する華氏を計算します。 , 最後に変換結果を出力します。

逆に、ユーザーが「華氏から摂氏」を選択した場合、プログラムはデータ型数値も値に置き換えて変数温度に代入し、そこから 32 を引いて 5 を掛けます。 /9 を計算します。対応する摂氏度を出力し、変換結果も出力します。

ステップ 3: プログラムを実行します

最後に、ブラウザでプログラムを実行すると、単純な温度コンバータが表示されます。温度変換結果を確認した後、簡単に摂氏に変換できます。華氏または華氏から摂氏。 JavaScript コードが正しく、ドキュメントオブジェクトモデル (DOM) に従って、温度値、変換タイプ、および出力結果を取得して処理していることを確認してください。

概要:

上記の簡単な手順を通じて、非常に実用的な JavaScript 温度コンバーターを作成できます。このプログラムはシンプルですが、拡張性が高く、単位選択の追加、より多くの温度レジームのサポートなど、さまざまなニーズを満たすためにより多くの機能を実装できます。これは、汎用スクリプト言語としての JavaScript の強力な有用性も示しています。

以上がJavaScriptで変換温度を書くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Reactのエコシステムのサイズ：複雑な風景をナビゲートしますApr 28, 2025 am 12:21 AM

tonavigatereAct'somplexEcosystemively、理解を理解し、認識していることを認識していることを認識しているandweakness、およびIntegreatemtoemtoemtoemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemtemotereconceptate、その後、勾配内で測定する

どのようにReactがキーを使用してリスト項目を効率的に識別しますApr 28, 2025 am 12:20 AM

RactuseSeSeSeSeSeSeSeSpiffictifideidifiedItemsbyprovidingastableidentitytoeeedelement.1）keysallowReactTotTotTotTotTotTotTotTotTotTotTotTotTotTotTotRACKESOUTRE-RENDERINGTHEENTERELIST.2）chookiniqueandstablekeys、avolididingArrayIndices.3）reforceAsificlySificlySiflovedobrovesiondanc

Reactにおける重要な問題のデバッグ：問題の特定と解決Apr 28, 2025 am 12:17 AM

KeysinReactarecrucialforoptimizingTherenderingProcessandDynamicListseffective.tospotandfixkey-relatedissues：1）adduniquekeystolistiTemstoavoidsissusisus、2）useuniqueidideididifiersfromdateadceSofofordiceys、3）

Reactの一方向データバインディング：予測可能なデータフローの確保Apr 28, 2025 am 12:05 AM

Reactの一元配置データバインディングにより、データが親コンポーネントから子コンポーネントに流れることが保証されます。 1）データは単一に流れ、親コンポーネントの状態の変化は子コンポーネントに渡すことができますが、子コンポーネントは親コンポーネントの状態に直接影響することはできません。 2）この方法により、データフローの予測可能性が向上し、デバッグとテストが簡素化されます。 3）制御されたコンポーネントとコンテキストを使用することにより、一方向のデータストリームを維持しながら、ユーザーの相互作用とコンポーネント間通信を処理できます。

Reactコンポーネントでキーを選択して管理するためのベストプラクティスApr 28, 2025 am 12:01 AM

keysinReactarecrucialforeffiencedomupdatessandRecOnciliation.1）選択可能でユニークな、そして類似のフルキーなど、Itemids.2）fornestedLists、useuniquekeysateachlevel.3）

ReactアプリケーションのuseState（）を使用してパフォーマンスを最適化しますApr 27, 2025 am 12:22 AM

useState（）uscrucialforoptimizingRectperformanceduetuitsoitsimpactonre-rendersandupdates.tooptimize：1）useusecallbacktomoize funtionsandpreventunnederireRenders.2）

コンテキストとuseState（）を使用してコンポーネント間で状態を共有するApr 27, 2025 am 12:19 AM

コンテキストとユーザーを使用して、大規模なReactアプリケーションで州の管理を簡素化できるため、状態を共有します。 1）プロップドリルを減らす、2）より明確なコード、3）グローバルな状態を管理しやすい。ただし、パフォーマンスのオーバーヘッドと複雑さのデバッグに注意してください。コンテキストと最適化技術の合理的な使用は、アプリケーションの効率と保守性を向上させることができます。

Reactの仮想DOMアップデートに対する誤ったキーの影響Apr 27, 2025 am 12:19 AM

誤ったキーを使用すると、Reactアプリケーションでパフォーマンスの問題や予期しない動作を引き起こす可能性があります。 1）キーはリスト項目の一意の識別子であり、Virtual Domを効率的にReactの更新を支援します。 2）同じまたは非ユニークなキーを使用すると、リスト項目が再注文され、コンポーネント状態が失われます。 3）キーとして安定した一意の識別子を使用すると、パフォーマンスを最適化し、完全な再レンダリングを回避できます。 4）ESLINTなどのツールを使用して、キーの正しさを確認します。キーを適切に使用すると、効率的で信頼性の高い反応アプリケーションが保証されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。