博客列表 >JavaScript实现星座查询功能 附详细代码

JavaScript实现星座查询功能 附详细代码

P粉676693833
P粉676693833原创
2022年04月07日 16:13:22654浏览

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

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

二、代码

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

三、结果

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

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

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

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

您可能感兴趣的文章:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议