9/24/2024

生まれてから2万日目はいつなのかをJavaScriptで計算するフォーム

  <h1>あなたの生年月日から生まれて2万日目をお教えします、生年月日を選択してください</h1>
  <form>
    <label>年:</label>
    <select id="year">
      <option value="">--年--</option>
      <?php
      $currentYear = date("Y");
      for ($i = 1950; $i <= $currentYear; $i++) {
        echo "<option value='$i'>$i</option>";
      }
      ?>
    </select>
    <label>月:</label>
    <select id="month">
      <option value="">--月--</option>
      <?php
      for ($i = 1; $i <= 12; $i++) {
        $month = str_pad($i, 2, "0", STR_PAD_LEFT);
        echo "<option value='$month'>$month</option>";
      }
      ?>
    </select>
    <label>日:</label>
    <select id="day">
      <option value="">--日--</option>
      <?php
      for ($i = 1; $i <= 31; $i++) {
        $day = str_pad($i, 2, "0", STR_PAD_LEFT);
        echo "<option value='$day'>$day</option>";
      }
      ?>
    </select>
    <button type="button" onclick="calculate()">送信</button>
  </form>
  <div id="result"></div>
  <script>
    function calculate() {
      var year = document.getElementById("year").value;
      var month = document.getElementById("month").value;
      var day = document.getElementById("day").value;
      if (year == "" || month == "" || day == "") {
        alert("年月日を選択してください。");
        return;
      }
      var birthday = new Date(year, month - 1, day);
      var targetDate = new Date(birthday.getTime() + (20000 * 86400000)); // 20000日後の日付を計算する
      var result = document.getElementById("result");
      result.innerHTML = "あなたが生まれてから2万日目は「" + targetDate.getFullYear() + "年" + (targetDate.getMonth() + 1) + "月" + targetDate.getDate() + "日」です!!";
    }
  </script>
↓実際のページ↓

0 件のコメント: