使用Javascript,如何检查用户输入是否满足所有条件,然后显示输出?

时间:2019-02-09 04:58:06

标签: javascript jquery html

我正在做一个作业,以开发一个工具来检查用户输入的年份是否是a年,并且输入的年份必须大于1582。我仍然不熟悉JavaScript,并且一直在寻找关于我到目前为止的一些反馈。

注意:为了使年份成为leap年,必须将其除以4,除非也可以除以100但不能除以400。我的答案应四舍五入到小数点后第一位。范例:5.01是5.0

我试图使输入年份符合所有这些条件,但我假设我没有以正确的格式输入年份,因此我正在寻找有关我可以编辑的内容的反馈。预先感谢

<p> Enter a year later than 1582 and we will tell you if it is leap year </p>
<p> Enter your year: </p> <input type="text" id="box6"> <button id="checkyear"> Check Year </button>
<p> Leap year output will appear here: </p> <input type="text" id="box7" disabled style="width:15%;">

let year = document.getElementById("box6")
let yearOutput = document.getElementById("box7")

function leapyear() {
    var inputYear = parseInt(year.value);
    var outputYear = yearOutput;
    if (Number("inputyear") < Number("1582") {
        outputYear.value = inputyear + "is invalid.";
    }
    if (Number("inputYear") > Number("1582") && Number("inputYear") / 4 && 
    Number("inputYear") / 100 && Number("inputYear") / 400 {
        outputYear.value = inputYear + " is a leap year.";
    }
    else if (Number("inputYear") > Number("1582") && 
    Number("inputYear") % 4 !== 0 || Number("inputYear") % 100 !== 0 || Number("inputYear") % 400 !== 0 {
        outputYear.value = inputYear + " is not a leap year."
    }
    else {
        outputYear.value = "Please enter a year to see if it is a leap year or not.";
    }
}
document.getElementById("checkyear").onclick = leapyear;

3 个答案:

答案 0 :(得分:1)

只需通过检查值是一个数字开始,然后使用Modulus函数。为此,我认为%给了我们余数。经典用法是测试[value]%2 === 0是偶数还是偶数。

let year = document.getElementById("box6");
let yearOutput = document.getElementById("box7");

function leapyear() {
  // Grab our input an convert.
  let inputYear = parseInt(year.value);
  let outputYear = yearOutput;
  // If input year is invalid number OR less than or equal to 1582
  if (isNaN(inputYear) || inputYear <= 1582) {
      outputYear.value = ((isNaN(inputYear)) ? "input" : inputYear) + " is invalid.";
      return;
  }
  
  // lets see if it is a leap (divisible by 4 AND (not 400 and not divisible by 100))
  if(inputYear%4 === 0 && (inputYear === 400 || !inputYear%100 === 0)) {
    console.log("leap year");
    outputYear.value = inputYear + " is a leap year.";
  } else {
    console.log("not leap year");
    outputYear.value = inputYear + " is not a leap year."
  }
}
document.getElementById("checkyear").onclick = leapyear;
<p> Enter a year later than 1582 and we will tell you if it is leap year </p>
<p> Enter your year: </p> <input type="text" id="box6"> <button id="checkyear"> Check Year </button>
<p> Leap year output will appear here: </p> <input type="text" id="box7" disabled style="width:15%;">

答案 1 :(得分:1)

尝试一下。这对我来说比较干净。

function leapyear(){
  let inputYear = parseInt(year.value);
  if(inputYear <= 1582){
    outputYear.value = `${inputYear} is invalid.`;
    return;
  }
  if(inputYear % 4 || (!(inputYear % 100) && inputYear % 400)){
    console.log("not leap year");
    outputYear.value = `${inputYear} is not a leap year.`;
    return;
  }
  console.log("leap year");
  outputYear.value = `${inputYear} is a leap year.`;
}

答案 2 :(得分:1)

将文本框设置为数字,而不是仅将数字作为有效输入的文本。

HTML代码:

  <p> Enter a year later than 1582 and we will tell you if it is leap year </p>
   <p> Enter your year: </p> <input type="number" id="box6"> <button id="checkyear"> Check Year </button>
  <p> Leap year output will appear here: </p> <input type="text" id="box7" disabled style="width:15%;">

JS代码:

 var year = document.getElementById("box6")
 var yearOutput = document.getElementById("box7")
 function checkLeap(){
     var ip = parseInt(year.value);
     if(isNAN(ip) || ip <= 1582){
       yearOutput.value = `${ip} is invalid.`;
      return;
     }
     if(ip % 4 || (!(ip % 100) && ip % 400)){
       yearOutput.value = `${ip} is not a leap year.`;
       return;
     }
    yearOutput.value = `${ip} is a leap year.`;
  }