計算機

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>完全版 計算機</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .section { display: none; margin-top: 20px; }
    input, select { margin: 5px 0; display: block; }
  </style>
</head>
<body>
  <h1>計算機</h1>
  <label for="menu">メニューを選んでください：</label>
  <select id="menu" onchange="showSection()">
    <option value="">-- 選択 --</option>
    <option value="1">１：四則演算</option>
    <option value="2">２：平均値</option>
    <option value="3">３：絶対値</option>
    <option value="4">４：実数解</option>
    <option value="5">５：〜以上〜以下計算</option>
    <option value="6">６：その他</option>
  </select>

  <!-- 四則演算 -->
  <div id="section-1" class="section">
    <h2>四則演算</h2>
    <select id="operation" onchange="updateInputs('op')">
      <option value="">-- 操作を選択 --</option>
      <option value="add">加算</option>
      <option value="sub">減算</option>
      <option value="mul">乗算</option>
      <option value="div">除算</option>
    </select>
    <input type="number" id="op-count" placeholder="いくつの数を使いますか？" oninput="generateNumberInputs('op')">
    <div id="op-numbers"></div>
    <button onclick="calculateOp()">計算</button>
    <p id="op-result"></p>
  </div>

  <!-- 平均値 -->
  <div id="section-2" class="section">
    <h2>平均値</h2>
    <input type="number" id="avg-count" placeholder="いくつの数を使いますか？" oninput="generateNumberInputs('avg')">
    <div id="avg-numbers"></div>
    <button onclick="calculateAvg()">計算</button>
    <p id="avg-result"></p>
  </div>

  <!-- 絶対値 -->
  <div id="section-3" class="section">
    <h2>絶対値</h2>
    <input type="number" id="abs-input" placeholder="整数を入力してください">
    <button onclick="calculateAbs()">計算</button>
    <p id="abs-result"></p>
  </div>

  <!-- 実数解 -->
  <div id="section-4" class="section">
    <h2>実数解 (2次方程式 ax^2 + bx + c = 0)</h2>
    <input type="number" id="a" placeholder="a">
    <input type="number" id="b" placeholder="b">
    <input type="number" id="c" placeholder="c">
    <button onclick="calculateRoots()">計算</button>
    <p id="root-result"></p>
  </div>

  <!-- 範囲の和 -->
  <div id="section-5" class="section">
    <h2>〜以上〜以下の和</h2>
    <select id="range-type">
      <option value="sum">全ての和</option>
      <option value="even">偶数の和</option>
      <option value="odd">奇数の和</option>
    </select>
    <input type="number" id="range-min" placeholder="最小値">
    <input type="number" id="range-max" placeholder="最大値">
    <button onclick="calculateRangeSum()">計算</button>
    <p id="range-result"></p>
  </div>

  <!-- その他 -->
  <div id="section-6" class="section">
    <h2>その他</h2>
    <h3>1/2の繰り返し</h3>
    <input type="number" id="half-input" placeholder="整数を入力">
    <button onclick="calculateHalf()">開始</button>
    <p id="half-result"></p>

    <h3>最大公約数</h3>
    <input type="number" id="gcd1" placeholder="整数1">
    <input type="number" id="gcd2" placeholder="整数2">
    <button onclick="calculateGCD()">計算</button>
    <p id="gcd-result"></p>

    <h3>最大・最小</h3>
    <input type="number" id="maxmin-count" placeholder="いくつの数を使いますか？" oninput="generateNumberInputs('maxmin')">
    <div id="maxmin-numbers"></div>
    <button onclick="calculateMaxMin()">計算</button>
    <p id="maxmin-result"></p>
  </div>

  <script>
    function showSection() {
      document.querySelectorAll('.section').forEach(s => s.style.display = 'none');
      const selected = document.getElementById('menu').value;
      if (selected) {
        document.getElementById(`section-${selected}`).style.display = 'block';
      }
    }

    function generateNumberInputs(prefix) {
      const count = parseInt(document.getElementById(`${prefix}-count`).value);
      const container = document.getElementById(`${prefix}-numbers`);
      container.innerHTML = '';
      for (let i = 0; i < count; i++) {
        const input = document.createElement('input');
        input.type = 'number';
        input.placeholder = `${i + 1}番目`;
        input.className = `${prefix}-number`;
        container.appendChild(input);
      }
    }

    function calculateOp() {
      const op = document.getElementById('operation').value;
      const nums = [...document.querySelectorAll('.op-number')].map(i => parseFloat(i.value));
      let result = op === 'mul' ? 1 : nums[0];
      if (op === 'add') result = nums.reduce((a, b) => a + b, 0);
      if (op === 'sub') result = nums.slice(1).reduce((a, b) => a - b, nums[0]);
      if (op === 'mul') result = nums.reduce((a, b) => a * b, 1);
      if (op === 'div') {
        for (let i = 1; i < nums.length; i++) {
          if (nums[i] === 0) return document.getElementById('op-result').textContent = '0では割れません（スキップ）';
          result /= nums[i];
        }
      }
      document.getElementById('op-result').textContent = `結果：${result}`;
    }

    function calculateAvg() {
      const nums = [...document.querySelectorAll('.avg-number')].map(i => parseFloat(i.value));
      const sum = nums.reduce((a, b) => a + b, 0);
      const avg = sum / nums.length;
      document.getElementById('avg-result').textContent = `平均値は ${avg}`;
    }

    function calculateAbs() {
      const num = parseFloat(document.getElementById('abs-input').value);
      document.getElementById('abs-result').textContent = `絶対値は ${Math.abs(num)}`;
    }

    function calculateRoots() {
      const a = parseFloat(document.getElementById('a').value);
      const b = parseFloat(document.getElementById('b').value);
      const c = parseFloat(document.getElementById('c').value);
      const D = b * b - 4 * a * c;
      if (D > 0) {
        const r1 = (-b + Math.sqrt(D)) / (2 * a);
        const r2 = (-b - Math.sqrt(D)) / (2 * a);
        document.getElementById('root-result').textContent = `実数解は ${r1} と ${r2}`;
      } else if (D === 0) {
        const r = -b / (2 * a);
        document.getElementById('root-result').textContent = `実数解は ${r}（重解）`;
      } else {
        document.getElementById('root-result').textContent = `実数解なし`;
      }
    }

    function calculateRangeSum() {
      const type = document.getElementById('range-type').value;
      const min = parseInt(document.getElementById('range-min').value);
      const max = parseInt(document.getElementById('range-max').value);
      let sum = 0;
      for (let i = Math.min(min, max); i <= Math.max(min, max); i++) {
        if (type === 'even' && i % 2 !== 0) continue;
        if (type === 'odd' && i % 2 === 0) continue;
        sum += i;
      }
      document.getElementById('range-result').textContent = `合計：${sum}`;
    }

    function calculateHalf() {
      let num = parseInt(document.getElementById('half-input').value);
      const result = [];
      while (num !== 1) {
        result.push(num);
        num = (num % 2 === 0) ? num / 2 : (num - 1) / 2;
      }
      result.push(1);
      document.getElementById('half-result').textContent = result.join(' → ');
    }

    function calculateGCD() {
      let a = parseInt(document.getElementById('gcd1').value);
      let b = parseInt(document.getElementById('gcd2').value);
      while (b !== 0) [a, b] = [b, a % b];
      document.getElementById('gcd-result').textContent = `最大公約数：${a}`;
    }

    function calculateMaxMin() {
      const nums = [...document.querySelectorAll('.maxmin-number')].map(i => parseFloat(i.value));
      const min = Math.min(...nums);
      const max = Math.max(...nums);
      document.getElementById('maxmin-result').textContent = `最小値：${min} 最大値：${max}`;
    }
  </script>
</body>
</html>