用JavaScript实现星座判断

用JavaScript实现星座判断

前言

​ 对前端的热爱可以延续到对生活的热爱，这是我在逆战班学习的第六个星期，开始学习脚本语言JavaScript使得我的前端开发有了更多的可能性。我认为编程学习不应该只局限于课堂，能够结合自己的想法去做一些简单的功能实现才是最好的学习方法。因此本周我尝试着用自己所学的JavaScript知识编译了一个简单的程序用于判断输入日期对应的星座。

准备工作

​ 在开始写代码之前，我们需要对自己的需求做一个简单的分析，首先我们不得不了解的就是星座的分布规律。

星座名称	白羊座	金牛座	双子座	巨蟹座	狮子座	处女座
对应日期	3.21 - 4.19	4.20 - 5.20	5.21 - 6.21	6.22 - 7.22	7.23 - 8.22	8.23 - 9.22
星座名称	天秤座	天蝎座	射手座	摩羯座	水瓶座	双鱼座
对应日期	9.23 - 10.23	10.24 - 11.22	11.23 - 12.21	12.22 - 1.19	1.20 - 2.18	2.19 - 3.20

编译思路

思路1：以星座为对象来寻找其对应范围
根据以上表格可以看出，每一个星座的日期基本都始于当月20日前后，结束于下一个月20日前后。
例如要判断处于1月20日到2月18日的水瓶座，我们需要判断月份“是否是1月，日期是否大于20日且小于31日”以及“是否是2月，日期是否小于18日”满足其中一个条件，输出“星座是水瓶座”。代码如下：

var getMonth = parseInt(prompt("请输入月份")), getDay = parseInt(prompt("请输入日期"));
if ((getMonth == 1 && getDay >= 20 && getDay <= 31)||(getMonth == 2 && getDay <= 18)) {
	alert(`${getMonth}月${getDay}日是水瓶座。`);
} 

​ 从以上代码可以看出，如若直接针对每一个星座写判断条件的话，不仅要考虑月份，还需要考虑日期，并且由于每个月的天数不同还需对日期的合理性进行判断，这样的代码太过冗余。

思路2：以月份为对象来判断对应的日期对应的星座
比如判断2月的星座，代码如下：

var getMonth = parseInt(prompt("请输入月份")), getDay = parseInt(prompt("请输入日期"));
switch (getMonth){
  case 2: 
    if(getDay >= 1 && getDay <= 18 ){
      alert(`${getMonth}月${getDay}日是水瓶座。`);
    }else if(getDay >= 18 && getDay <= 29 ){
      alert(`${getMonth}月${getDay}日是双鱼座。`);
    }break;
}

将以月作为先决条件，判断输入的日期是否在当月的最大天数内，再判断当月的日期以确定星座，这种思路就简单了许多。

代码简化

虽然从上面的代码中，我们得到了想要的结果，但是诸如用于判断日期范围和弹窗提示的代码存在很多重复，为了加强代码的可读性，节约计算机资源，我们可以进行适当的简化。
我们不妨单独声明一个容器用于存储控制弹窗结果的变量，当循环中满足条件式，修改变量即可，由此可以写为

var getMonth = parseInt(prompt("请输入月份")), getDay = parseInt(prompt("请输入日期"));
var res = null; //单独声明一个用于存放星座输出结果的容器。
switch (getMonth){
  case 2: 
    if(getDay >= 1 && getDay <= 18 ){
      res = '水瓶座';
    }else if(getDay >= 18 && getDay <= 29 ){
      res = '双鱼座';
    }break;
}
alert(res ? `${getMonth}月${getDay}日是${res}。`:`请输入有效日期`);

​ 经过进一步观察，每个月的天数范围都在1～31之间，且部分月份只有30天或29天，由此不妨给switch循环外再包裹一个if判断语句，用于筛除不符合要求的天数，再根据几个特殊月份的最大天数，分别定义判断式，由此可以写出以下12个月的代码。

var getMonth = parseInt(prompt("请输入月份")), getDay = parseInt(prompt("请输入日期"));
var res = null; //单独声明一个用于存放星座输出结果的容器。
var lastDay = (getDay <= 30),FebDay = (getDay <= 29); //用于限制当月最大天数
if(getDay >= 1 || getDay <= 31){
  switch (getMonth){
    case 1://1月星座
      if(getDay <= 19){res = '摩羯座';}else if(getDay >= 20){res = '水瓶座';}break;
    case 2: //2月星座
      if(getDay <= 18){res = '水瓶座';}else if(getDay >= 18 && FebDay){res = '双鱼座';}break;
    case 3://3月星座
      if(getDay <= 20){res = '双鱼座';}else if(getDay >= 21){res = '白羊座';}break;
    case 4: //4月星座
      if(getDay <= 19){res = '白羊座';}else if(getDay >= 20 && lastDay){res = '金牛座';}break;
    case 5://5月星座
      if(getDay <= 20){res = '金牛座';}else if(getDay >= 21){res = '双子座';}break;
    case 6://6月星座
      if(getDay <= 21){res = '双子座';}else if(getDay >= 22 && lastDay){res = '巨蟹座';}break;
    case 7://7月星座
      if(getDay <= 22){res = '巨蟹座';}else if(getDay >= 23){res = '狮子座';}break;
    case 8://8月星座
      if(getDay <= 22){res = '狮子座';}else if(getDay >= 23){res = '处女座';}break;
    case 9://9月星座
      if(getDay <= 22){res = '处女座';}else if(getDay >= 23 && lastDay){res = '天秤座';}break;
    case 10://10月星座
      if(getDay <= 23){res = '天秤座';}else if(getDay >= 24){res = '天蝎座';}break;
    case 11://11月星座
      if(getDay <= 22){res = '天蝎座';}else if(getDay >= 23 && lastDay){res = '射手座';}break;
    case 12://12月星座
      if(getDay <= 21){res = '射手座';}else if(getDay >= 22){res = '摩羯座';}break;
  }
}
alert(res ? `${getMonth}月${getDay}日是${res}。`:`请输入有效日期`);

最后，还有一个需要注意的地方，便是浮点数问题，理论上日期和月份必须为整数，如何在访问者输入了小数以后提示输入错误呢？其实只需要加入一个简单的判断，即对输入数字进行取整，再判断取整结果是否与取整前相等即可。

var getMonth = prompt("请输入月份"), getDay = prompt("请输入日期");
if(getMonth == parseInt(getMonth) && getDay == parseInt(getDay)){
  getMonth = parseInt(getMonth), getDay = parseInt(getDay);
  zodiac();
}
else{alert(`请输入有效日期`)};

function zodiac(){
  var res = null; //单独声明一个用于存放星座输出结果的容器。
	var lastDay = (getDay <= 30),FebDay = (getDay <= 29); //用于限制当月最大天数
  if(getDay >= 1 || getDay <= 31){
  switch (getMonth){
    case 1://1月星座
      if(getDay <= 19){res = '摩羯座';}else if(getDay >= 20){res = '水瓶座';}break;
    case 2: //2月星座
      if(getDay <= 18){res = '水瓶座';}else if(getDay >= 18 && FebDay){res = '双鱼座';}break;
    case 3://3月星座
      if(getDay <= 20){res = '双鱼座';}else if(getDay >= 21){res = '白羊座';}break;
    case 4: //4月星座
      if(getDay <= 19){res = '白羊座';}else if(getDay >= 20 && lastDay){res = '金牛座';}break;
    case 5://5月星座
      if(getDay <= 20){res = '金牛座';}else if(getDay >= 21){res = '双子座';}break;
    case 6://6月星座
      if(getDay <= 21){res = '双子座';}else if(getDay >= 22 && lastDay){res = '巨蟹座';}break;
    case 7://7月星座
      if(getDay <= 22){res = '巨蟹座';}else if(getDay >= 23){res = '狮子座';}break;
    case 8://8月星座
      if(getDay <= 22){res = '狮子座';}else if(getDay >= 23){res = '处女座';}break;
    case 9://9月星座
      if(getDay <= 22){res = '处女座';}else if(getDay >= 23 && lastDay){res = '天秤座';}break;
    case 10://10月星座
      if(getDay <= 23){res = '天秤座';}else if(getDay >= 24){res = '天蝎座';}break;
    case 11://11月星座
      if(getDay <= 22){res = '天蝎座';}else if(getDay >= 23 && lastDay){res = '射手座';}break;
    case 12://12月星座
      if(getDay <= 21){res = '射手座';}else if(getDay >= 22){res = '摩羯座';}break;
  	}
	}alert(res ? `${getMonth}月${getDay}日是${res}。`:`请输入有效日期`);
}

至此星座判断的JavaScript脚本就写完了，可能还有一些不足，但已是我目前的所有实力。我还会继续前端学习，我相信只要不断努力超越自我，总有一天我也能成为一名真正的前端工程师。