如何为数组分配日期范围并与日期输入数据进行比较

Question

我有一个有两个日期输入字段的应用程序。我有一个现有的函数，它从每个字段中提取数字，并不断地添加数字，直到产生一个数字为止。然后，它返回相应的数字，并在它们前面显示一些文本。

我想要创建另一个函数，它执行类似的操作，它获取输入字段的月份和日期(而不是年份)，然后将日期匹配到数组(我认为呢？)12个不同的日期范围。最后，我想简单地把这个分配给星象符号名称的一个字符串。例如，04/09 (不重要的年份)将产生“白羊座”。重要的是要记住的是，有12个日期范围(如3月20日至4月20日)，我需要比较输入日期。

我不知道该如何构造这个函数来做我想做的事。似乎我需要创建一个包含12个不同日期范围的数组，并以某种方式对照这个数组检查输入数据。

有小费吗？这是我现有的javascript和html：

var ZodiacSigns = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra', 'Scorpio', 'Saggitarius', 'Capricorn','Aquarius', 'Pisces'];




function getSum() {
// Place the id's of the input and output elements into respective arrays
let inputs = ['dateInput1','dateInput2'];
let outputs = ['result1','result2'];

// Loop over the items in the inputs array
// This will cause you to loop as many times as there are input elements
inputs.forEach(function(input, index){

// Instead of hard-coding the element id, you get the element reference
// from the .forEach callback function argument.
const inputValue = document.getElementById(input).value;
var sum = 0;
for (var i = 0; i < inputValue.length; i++) {
  const num = parseInt(inputValue.charAt(i));
  if (!isNaN(num)) {
    sum += num;
  }
}
const total = (sum - 1) % 9 + 1;
// And here, you reference the right output element, by using the corresponding
// index from the inputs array.
document.getElementById(outputs[index]).textContent = "Your number is: " + total;

});
}

<div class="container">

    <div class="cell-1" id="centerElement">
        <div id="cell-1-nest-l"></div>
        <div id="cell-2-nest-l"></div>
        <div id="cell-3-nest-l"></div>
        <div id="cell-4-nest-l"><h3>your name</h3></div>
        <div id="cell-5-nest-l"></div>
        <div id="cell-6-nest-l"><input type="text" class="nameStyle1" id="nameInput1"></div>

</div>

    <div class="cell-2" id="centerElement" ><img onclick="getSum();" 
src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

    <div class="cell-3" id="centerElement" >
            <div id="cell-1-nest"></div>
            <div id="cell-2-nest"></div>
            <div id="cell-3-nest"><h3>their name</h3></div>
            <div id="cell-4-nest"></div>
            <div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2"> 
 </div>
            <div id="cell-6-nest"></div>


            </div>

    <div class="cell-4" id="result1">
        <input type="date" class="dateStyle1" id="dateInput1">
            </div>

    <div class="cell-5"><button>Start Over</button></div>

    <div class="cell-6" id="result2"> 
        <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">
            </div>
    <div class="cell-7"></div>

    <div class="cell-8"></div>

    <div class="cell-9"></div>


</div>

Answer 1

有很多种不同的方法。下面是一个使用一系列范围进行比较的快速示例，以完成您所说的操作。

摘录留给读者填写实际的生肖日期。

function getZodiac(day, month){

    // store the start/end ranges for the zodiacs
    let zodiacs = {
        'crab':{
            'start':[1,1],
            'end':[25,7]
        },
        'dog':{
            'start':[25,7],
            'end':[31,12]
        }
    }

    // loop through each property of 'zodiacs' in this case the property name is the zodiac_name
    for(let zodiac_name in zodiacs){

        // the object contains two properties 'start' and 'end'. Each of which is an array of two numbers. The first is the day, the second is the month.
        // so start[0] indicates this is the starting day, and end[1] indcates the ending day
        if(
            (month >= zodiacs[ zodiac_name ].start[1] && month < zodiacs[ zodiac_name ].end[1]) && // is the passed-in month in between the start and end for this?
            (day >= zodiacs[ zodiac_name ].start[0] && day < zodiacs[ zodiac_name ].end[0]) // is the passed-in day in between the start and end for this?
        ){
            console.log(`You're a ${zodiac_name}!`); // print out the name of this property!
        }
    }
}

getZodiac(1, 1); // you're a crab!
getZodiac(27, 7); // you're a dog!