javascript中的闰年检查器

如何解决javascript中的闰年检查器

我正在尝试在我的年龄计算器中加入一个闰年检查器。它工作了一段时间，现在每次我选择一个日期时它都会输出“这是一个闰年”。我究竟做错了什么？？谢谢！

var year;

function ageCalculator() {
  var userinput = document.getElementById("dob").value;
  var dob = new Date(userinput);

  if (userinput == null || userinput == '') {
    document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  } else {
    //calculate month difference from current date in time
    var month_diff = Date.Now() - dob.getTime();

    //convert the calculated difference in date format
    var age_dt = new Date(month_diff);

    //extract year from date
    var year = age_dt.getUTCFullYear();
    calYear();
    //Now calculate the age of the user
    var age = Math.abs(year - 1970);

    //display the calculated age
    return document.getElementById("result").innerHTML =
      "Age is: " + age + " years. ";
  }
}

function calYear() {
  var yr = year;
  var yr = document.getElementsByName("year");
  if (yr % 400 == 0 || (yr % 100 != 0 && yr % 4 == 0)) {
    window.alert("This is not leap!");
  } else {
    window.alert("This is a leap!");
  }
}

<input type="text" id="dob" />
<button type="button" onclick="ageCalculator()">Calculate</button>
<span id="message"></span><br/>
<span id="result"></span>

解决方法

• document.getElementsByName("year") 是一个集合而不是一个元素值！此外，Element.value 始终返回一个字符串 - 作为开发人员，您的任务是根据需要将字符串（或了解类型转换）转换为整数或浮点数。
• 不要将细节放入函数中（例如：document.getElementById 等）使其可重用！
• 避免使用最终会污染全局窗口范围 (var year) 的变量。在某些时候尝试console.log(window.year)，你就会明白为什么。
• 不要调用函数 calYear() ? 如果它返回一个字符串。而是正确地调用它：isLeap() 并按照它说的去做！返回一个布尔值。
  只有在您在 UI 中使用/调用该函数时 - 决定您想要显示的适当字符串。不要限制自己。
• 使用 new Date(someUserInput) 时要始终小心，其中 someUserInput 可能是无效的 ISO8601 字符串。您很容易得到误报。
• PS：Date.now() - dob.getTime() 无论如何都不能像您的评论所说的那样：“计算月差”这绝对不是真的 - 写评论和命名函数时要小心。

/**
 * @param {integer} year
 * @return {boolean} - True if year is leap year
 */
const isLeap = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

/**
 * @param {string} DOBString - A valid ISO8601 dateString
 * @return {integer} - Age
 */
const calcAge = (DOBString) => {
  const UTC_DOB = new Date(DOBString);
  if (!DOBString || isNaN(UTC_DOB)) return;
  const UTC_today = new Date();
  const m = UTC_today.getUTCMonth() - UTC_DOB.getUTCMonth(); // Month diff
  let age = UTC_today.getUTCFullYear() - UTC_DOB.getUTCFullYear();
  if (m < 0 || (m === 0 && UTC_today.getUTCDate() < UTC_DOB.getUTCDate())) age--;
  return age;
};

// UI/Page/View specific scripts:

const EL_DOB = document.querySelector("#DOB");
const EL_result = document.querySelector("#result");
const EL_leap = document.querySelector("#leap");
const UI_showAgeResult = () => {
  const age = calcAge(EL_DOB.value);
  const UTC_DOB = new Date(EL_DOB.value);
  const is_leap = isLeap(UTC_DOB.getUTCFullYear());
  EL_result.textContent = age ? age : "Insert a valid date";
  EL_leap.textContent =  is_leap ? "Born on a leap year! so cool" : "";
};

// Do it on input Event
EL_DOB.addEventListener("input",UI_showAgeResult);
// And if needed on page init
UI_showAgeResult();

<input id="DOB" type="text" value="2000-02-29"/>
<span id="result"></span><br>
<span id="leap"></span>

重要提示：
请注意，如果用户 出生日期 是“2000-02-29”，并说 今天 的日期是“2001-02-28”，则结果年龄将是可以说是正确的0。
仅当 date 为“2001-03-01”时才会导致 1 y of age。

点赞：
稍微修改了 @naveen 用于计算日期差异 → 年龄的答案代码。

,

建议你看看这个版本

Calculate age given the birth date in the format YYYYMMDD

要修复您的代码，我们需要将年份传递给函数，而不是尝试使用不存在的年份字段

如果有这样的字段，您可以使用 document.querySelector("[name=year]").value 访问它的值，因为 document.getElementsByName 是一个集合，值将是 document.getElementsByName("year")[0].value

那我做了什么？

• 将 DOB 年份传递给闰年函数
• 从日期差异的年份计算年龄

我用 2000-02-29 和 2001-02-28 测试

注意脚本也适用于 02/29/2016 但不适用于 29/02/2016（欧洲格式）

var year;

function ageCalculator() {
  var userinput = document.getElementById("DOB").value;
  var dob = new Date(userinput);

  if (isNaN(dob)) {
    document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  } else {

    //extract year from date
    var year = dob.getFullYear();
    console.log(year)
    testLeap(year);

    //calculate difference from current date in milliseconds
    var date_diff = Date.now() - dob.getTime();

    //convert the calculated difference in date format
    var age_dt = new Date(date_diff);

   //now calculate the age of the user
    var age = Math.abs(1970 - age_dt.getFullYear());

    //display the calculated age
    return document.getElementById("result").innerHTML =
      "Age is: " + age + " years. ";
  }
}

function testLeap(yr) {
  const isLeap = (yr % 400 == 0 || (yr % 100 != 0 && yr % 4 == 0)) 
  alert(isLeap ? "This is a leap!" : "This is not a leap!");
}

<input type="text" id="DOB" />
<button type="button" onclick="ageCalculator()">Calculate</button>
<span id="message"></span><br/>
<span id="result"></span>

,

如果你只需要一个函数来检查输入的年份是否是闰年，你可以使用Date对象：

function isLeapYear(year) {
    // year,monthIndex,day
    return new Date(year,1,29).getFullYear() === year;
}

,

这是检查今年是否是闰年的功能

function isLeapYear(year){
 return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

isLeapYear(2000) //true
isLeapYear(2001) // false

编辑： 所以问题出在 document.getElementsByName("year") 我认为你应该有一个名为 year 的 HTML，它具有年份值

<input type="number" name="year" />

,

这是我可以确保它有效的另一种方法

function ageCalculator() {
  var userinput = document.getElementById("DOB").value;
  var dob = new Date(userinput);

  if (userinput == null || userinput == '') {
    document.getElementById("message").innerHTML = "**Choose a date please!";
    return false;
  } else {
    //calculate month difference from current date in time
    var month_diff = Date.now() - dob.getTime();

    //convert the calculated difference in date format
    var age_dt = new Date(month_diff);

    //extract year from date
    var year = age_dt.getUTCFullYear();
    calYear(year);
    //now calculate the age of the user
    var age = Math.abs(year - 1970);

    //display the calculated age
    return document.getElementById("result").innerHTML =
      "Age is: " + age + " years. ";
  }
}

function calYear(yr) {
  if (yr % 400 == 0 || (yr % 100 != 0 && yr % 4 == 0)) {
    window.alert("This is not leap!");
  } else {
    window.alert("This is a leap!");
  }
}

如果条件假设，请尝试更新 callYear yr> 1000 和 yr

function calYear(yr) {
  if ((yr % 4 === 0 && yr % 100 !== 0) || yr % 400 === 0 ) {
    window.alert("This is not leap!");
  } else {
    window.alert("This is a leap!");
  }
}