如何制作一周中的一天計算器？-有解無憂

我目前正在制作一個網頁，當用戶在公歷中輸入標準日期時，程式將回傳它所在的星期幾。我嘗試了更長、更粗暴的方法，將代碼編號分配給日、月、年和世紀（以及閏年，這需要一些嵌套的 if-else 塊）。那個最終確實有效，但一周中的哪一天是錯誤的，并且會隨著您一天的上升或下降而發生巨大變化。

我的下一個方法是安大略省滑鐵盧大學的這種方法，它表示這種方法對于計算機編程更有效。這是我當前的代碼，它不輸出任何內容

我對任何評論、建議或疑慮持開放態度，并隨時對我的無能大喊大叫。

let innerHTMLText = "";

function calculateDay() {
  const day = document.getElementById("dayInput").value;
  let month = document.getElementById("monthInput").value;
  const year = document.getElementById("yearInput").value;

  let lastYearDigits = parseInt(year.substr(2, 2));
  const centuryCode = parseInt(year.substr(0, 2));
  if (month === "1" || month.toLowerCase() === "january" || month === "2" || month.toLowerCase() === "february") {
    lastYearDigits -= 1
  }

  switch (month.toLowerCase()) {
    case "january":
      month = 11;
      break;
    case "february":
      month = 12;
      break;
    case "march":
      month = 1;
      break;
    case "april":
      month = 2;
      break;
    case "may":
      month = 3;
      break;
    case "june":
      month = 4;
      break;
    case "july":
      month = 5;
      break;
    case "august":
      month = 6;
      break;
    case "september":
      month = 7;
      break;
    case "october":
      month = 8;
      break;
    case "november":
      month = 9;
      break;
    case "december":
      month = 10;
      break;
    default:
      if (Number.isInteger(parseInt(month))) {
        month = parseInt(month);
      } else {
        innerHTMLText = "buh please enter a valid month";
      }
  }

  const result = (day   Math.floor((2.6 * month) - 0.2) - (2 * centuryCode)   lastYearDigits   Math.floor(lastYearDigits / 4)   Math.floor(centuryCode / 4)) % 7;

  switch (result) {
    case 0:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Sunday`;
      break;
    case 1:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Monday`;
      break;
    case 2:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Tuesday`;
      break;
    case 3:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Wednesday`;
      break;
    case 4:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Thursday`;
      break;
    case 5:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Friday`;
      break;
    case 6:
      innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Saturday`;
      break;
    default:
      return;
  }
}

document.getElementById("buh").innerHTML = innerHTMLText;

<p><strong>Input any day from 1 Jan 1700 to 31 Dec 2999 below and figure out what day of the week it was, is, or will be on.</strong></p>
<form autocomplete="off" action="/DotW" onsubmit="calculateDay()">
  <label for="day">Day:</label><br />
  <input type="number" min="1" max="31" id="dayInput" name="day" required><br /><br />
  <label for="month">Month:</label><br />
  <input type="text" id="monthInput" name="month" required><br /><br />
  <label for="year">Year:</label><br />
  <input type="number" min="1700" max="2999" id="yearInput" name="year" required><br /><br />
  <input type="submit" class="fancy-button">
</form>
<br /><br />
<p id="buh"> - </p>

uj5u.com熱心網友回復：

幾個問題

在函式內設定內部 HTML
取消提交

這里我使用 eventListeners

雖然腳本可以縮短為幾行

window.addEventListener("load", function() {
  document.getElementById("calcForm").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    let innerHTMLText = "";


    const day = document.getElementById("dayInput").value;
    let month = document.getElementById("monthInput").value;
    const year = document.getElementById("yearInput").value;

    let lastYearDigits = parseInt(year.substr(2, 2));
    const centuryCode = parseInt(year.substr(0, 2));
    if (month === "1" || month.toLowerCase() === "january" || month === "2" || month.toLowerCase() === "february") {
      lastYearDigits -= 1
    }

    switch (month.toLowerCase()) {
      case "january":
        month = 11;
        break;
      case "february":
        month = 12;
        break;
      case "march":
        month = 1;
        break;
      case "april":
        month = 2;
        break;
      case "may":
        month = 3;
        break;
      case "june":
        month = 4;
        break;
      case "july":
        month = 5;
        break;
      case "august":
        month = 6;
        break;
      case "september":
        month = 7;
        break;
      case "october":
        month = 8;
        break;
      case "november":
        month = 9;
        break;
      case "december":
        month = 10;
        break;
      default:
        if (Number.isInteger(parseInt(month))) {
          month = parseInt(month);
        } else {
          innerHTMLText = "buh please enter a valid month";
        }
    }

    const result = (day   Math.floor((2.6 * month) - 0.2) - (2 * centuryCode)   lastYearDigits   Math.floor(lastYearDigits / 4)   Math.floor(centuryCode / 4)) % 7;

    switch (result) {
      case 0:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Sunday`;
        break;
      case 1:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Monday`;
        break;
      case 2:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Tuesday`;
        break;
      case 3:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Wednesday`;
        break;
      case 4:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Thursday`;
        break;
      case 5:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Friday`;
        break;
      case 6:
        innerHTMLText = `The day of the week that ${day}/${month}/${year} falls on is: Saturday`;
        break;
      default:
        return;
    }


    document.getElementById("buh").innerHTML = innerHTMLText;
  })
})

<p><strong>Input any day from 1 Jan 1700 to 31 Dec 2999 below and figure out what day of the week it was, is, or will be on.</strong></p>
<form autocomplete="off" action="/DotW" id="calcForm">
  <label for="day">Day:</label><br />
  <input type="number" min="1" max="31" id="dayInput" name="day" required><br /><br />
  <label for="month">Month:</label><br />
  <input type="text" id="monthInput" name="month" required><br /><br />
  <label for="year">Year:</label><br />
  <input type="number" min="1700" max="2999" id="yearInput" name="year" required><br /><br />
  <input type="submit" class="fancy-button">
</form>
<br /><br />
<p id="buh"> - </p>

uj5u.com熱心網友回復：

怎么了Date.getDay？月份選擇器不是更合適嗎？

使用行內事件處理程式通常不是一個好主意。

這是使用事件委托的示例。

document.addEventListener(`click`, handle);
const days = `Sunday,Monday,Tuesday,Wednessday,Thursday,Friday,Saturday`.split(`,`);
const pad = nr => `${nr < 10 ? `0${nr}` : nr}`;
const formatDate = date => [
  date.getFullYear(), 
  pad(date.getMonth()   1),
  pad(date.getDate())].join(`-`);

function handle(evt) {
  if (evt.target.id === `justABttn`) {
    const reslt = document.querySelector(`pre.result`);
    const values = [...document.querySelectorAll(`[type='number'], select`)]
      .reduce( (acc, v) => ( { ...acc, [v.id]: v.value } ), {} );
      
    if (Object.values(values).filter(v => v).length === 3) {
      const date = new Date(`${values.year}/${values.month}/${values.date}`);
      const dayOfWeek = date.getDay();
      return reslt.textContent = `${formatDate(date)} ${date > new Date() ? `will be` : `was`} on ${
        days[dayOfWeek]}\nNote: an impossible date (e.g. febr 31th or april 31th)\nmay be autoconverted to a later date`;
    }
    
    return reslt.textContent = `not enough values available`;
  }
}

body {
  margin: 1rem;
  font: 12px/15px verdana, arial;
}

h3 {
  margin-bottom: 0.3rem;
}

p, button {
  margin: 0.3rem 0;
}

pre.result {
  position: fixed;
  top: 5rem;
  left: 30vw;
}

<h3>Input a date from 1 Jan 1700 to 31 Dec 2999</h3>
<p>
  <label for="date">Date:</label><br>
  <input type="number" min="1" max="31" id="date" required value="3">
</p>
<p>
  <label for="month">Month:</label><br>
  <select id="month" required><br>
    <option value=1 selected>January</option>
    <option value=2>February</option>
    <option value=3>March</option>
    <option value=4>April</option>
    <option value=5>May</option>
    <option value=6>June</option>
    <option value=7>July</option>
    <option value=8>August</option>
    <option value=9>September</option>
    <option value=10>October</option>
    <option value=11>November</option>
    <option value=12>December</option>
  </select>
</p>
<p>
  <label for="year">Year:</label><br>
  <input type="number" min="1700" max="2999" id="year" required value="1783">
</p>
<button id="justABttn">Get me the day</button>
<pre class="result"></pre>

uj5u.com熱心網友回復：

您也可以使用。

document.getElementById("form").addEventListener("submit", (e) => {
  e.preventDefault();
  var dateString = document.getElementById('date').value;
  var date = new Date(dateString);
  
  var day = date.getDay();
  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
  alert("The day is "   days[day]);
});

<form id="form">
<input id="date" placeholder="mm/dd/yyyy" />
<button type="submit">Submit</button>
</form>

效率很高！

uj5u.com熱心網友回復：

在發明輪子之前，我會嘗試一下現有的解決方案。當談到與日期相關的 javascript 函式時，我個人最喜歡的是：https : //date-fns.org/

它有一個內置的方法來完成你想要實作的目標：https : //date-fns.org/v2.25.0/docs/getDay

將此與常規日期輸入欄位相結合，可為您提供一個非常可靠且易于維護的解決方案。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/357511.html

標籤：javascript html

上一篇：CSS：對齊圖示右側的文本

下一篇：#在innerHTMLJavascript的文本中