javascript 摂氏から華氏に変換する

作成日 2022.10.15
javascript
javascript

javascriptで、摂氏から華氏に変換するサンプルコードを記述してます。

1. 環境
2. 摂氏から華氏に変換
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

摂氏から華氏に変換

摂氏から華氏に変換するには、「華氏＝(1.8)×摂氏＋32」なので、この計算式を使用するだけとなります。

function chk(num){

    return (num * 1.8) + 32

}

console.log( chk(33) ) // 91.4

少数以下を切り捨てたい場合は、「Math.floor」を使用します。

function chk(num){

    return Math.floor((num * 1.8) + 32)

}

console.log( chk(33) ) // 91

少数点以下を四捨五入する

小数点以下の値を切り上げて表示する

小数点以下の値を切り捨てて表示する

逆に、華氏から摂氏に変更する場合は、以下となります。

function chk2(num){

    return (num - 32 ) / 1.8

}

console.log( chk2(91.4) ) // 33

サンプルコード

以下は、実行ボタンをクリックすると、入力した数値を摂氏として、華氏に変換して表示するだけのサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span id="result" class="badge bg-success">結果</span></h2>

    <form name="frm">
      <input type="number" id="n" class="form-control"/>
    </form>

    <button id="btn" class="btn btn-danger btn-rounded mt-1">実行</button>

  </div>

  <script>

    const chk = (num) => {

      return (num * 1.8) + 32

    }

    btn.onclick = () => {

      result.innerHTML = chk(n.value)

    }

  </script>
</body>

</html>

計算されていることが確認できます。