javascript 端数がでないように割り算を行う

作成日 2020.08.20
更新日 2022.06.06
javascript
javascript

javascriptで割り勘などに利用できる端数がでないように割り算を行うためのサンプルコードを記述してます。

1. 環境
2. サンプルコード

環境

OS windows 11 home
Apache 2.4.43
ブラウザ chrome 102.0.5005.63

Javascript サンプル集はこちら

サンプルコード

以下は、5000円を3人で割り勘して一人あたりの金額を出力するサンプルコードとなります。

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />

  <!-- UIkit JS -->
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</head>
<style>
  .container {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
  }
</style>
<script>

  window.onload = function () {

    let rusult = Math.floor(5000 / 3);
    let amari = 5000 % 3;

    let human = [];

    //1人当たりの金額を配列に挿入
    for (let i = 0; i < 3; i++) {
      human[i] = (i < amari) ? rusult + 1 : rusult;
    }

    //以下は結果を表示するだけのコード
    let text = [];

    for (let i = 0; i < human.length; i++) {
      text.push('<li>' + human[i] + '</li>');
    }

    let txt = document.getElementById("txt");
    txt.innerHTML = text.join('');
  }

</script>

<body>
  <div class="container">
    <ul id="txt" class="uk-list uk-list-square"></ul>
  </div>
</body>

</html>

実行結果をみると、ちゃんと1人あたりの金額になるように表示されていることが確認できます。