Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript实现星座查询功能 附详细代码
Blogger Information
Blog 17
fans 0
comment 0
visits 14576
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript实现星座查询功能 附详细代码
P粉676693833
Original
655 people have browsed it

最近小编在做一个项目，其中涉及到一个模块关于星座查询功能，即在文本框中输入一个生日值，点击按钮可以得到对应的星座，怎么实现这个需求呢？下面小编通过示例代码给大家介绍下，需要的朋友参考下吧
目录
一、题目
二、代码
三、结果
四、总结

一、题目
在文本框中输入一个生日值，点击按钮，可以显示此生日的对应星座。定义一个函数，该函数用来接收一个生日值（月日组成的4位字符串，比如“0210”，“1225”等），并根据该生日值提示属于的星座。

二、代码 

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>星座查询</title>
  6. </head>
  8. <body>
  9. <p align="center">
  10.     请输入一个生日值（如：0123）：
  11.     <input type="text" id="t1">   
  12.     <input type="button" value="显示星座" onclick="show()"/>
  13. </p>
  15. <script>
  16.     function show(){
  17.     var c1=document.getElementById("t1").value;    //获取文本框中的值
  18.     //alert(c1);
  19.     var month=c1.substring(0,2);
  20.     var day=parseInt(c1.substring(2));
  21.     switch(month){
  22.         case "01":
  23.             if(day>19){alert("水瓶座")}
  24.             else alert("摩羯座");
  25.             break;
  26.         case "02":
  27.             if(day>18){alert("双鱼座")}
  28.             else alert("水瓶座");
  29.             break;
  30.         case "03":
  31.             if(day>20){alert("白羊座")}
  32.             else alert("双鱼座");
  33.             break;
  34.         case "04":
  35.             if(day>19){alert("金牛座")}
  36.             else alert("白羊座");
  37.             break;
  38.         case "05":
  39.             if(day>20){alert("双子座")}
  40.             else alert("金牛座");
  41.             break;
  42.         case "06":
  43.             if(day>21){alert("巨蟹座")}
  44.             else alert("双子座");
  45.             break;
  46.         case "07":
  47.             if(day>22){alert("狮子座")}
  48.             else alert("巨蟹座");
  49.             break;
  50.         case "08":
  51.             if(day>22){alert("处女座")}
  52.             else alert("狮子座");
  53.             break;
  54.         case "09":
  55.             if(day>22){alert("天秤座")}
  56.             else alert("处女座");
  57.             break;
  58.         case "10":
  59.             if(day>23){alert("天蝎座")}
  60.             else alert("天秤座");
  61.             break;
  62.         case "11":
  63.             if(day>20){alert("射手座")}
  64.             else alert("天蝎座");
  65.             break;
  66.         case "12":
  67.             if(day>21){alert("摩羯座")}
  68.             else alert("射手座");
  69.             break;
  71.     }
  72. }
  74. </script>
  75. </body>
  76. </html>

三、结果

四、总结
1、首先要清楚星座与日期之间的对应的关系：

2、 substring(start,end)将返回一个包含从start到最后（不包括end）的子字符串的字符串；

parseInt()函数可解析一个字符串，并返回一个整数。

到此这篇关于JavaScript实现星座查询功能 附详细代码的文章就介绍到这了,更多相关js星座查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post