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

 更新时间:2021年11月02日 16:33:47   作者:少有挚友Y  
最近小编在做一个项目,其中涉及到一个模块关于星座查询功能,即在文本框中输入一个生日值,点击按钮可以得到对应的星座,怎么实现这个需求呢?下面小编通过示例代码给大家介绍下,需要的朋友参考下吧

一、题目

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

二、代码 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星座查询</title>
</head>
 
<body>
<p align="center">
	请输入一个生日值(如:0123):
	<input type="text" id="t1">	
	<input type="button" value="显示星座" onclick="show()"/>
</p>
 
<script>
	function show(){
	var c1=document.getElementById("t1").value;    //获取文本框中的值
	//alert(c1);
	var month=c1.substring(0,2);
	var day=parseInt(c1.substring(2));
	switch(month){
		case "01":
			if(day>19){alert("水瓶座")}
			else alert("摩羯座");
			break;
		case "02":
			if(day>18){alert("双鱼座")}
			else alert("水瓶座");
			break;
		case "03":
			if(day>20){alert("白羊座")}
			else alert("双鱼座");
			break;
		case "04":
			if(day>19){alert("金牛座")}
			else alert("白羊座");
			break;
		case "05":
			if(day>20){alert("双子座")}
			else alert("金牛座");
			break;
		case "06":
			if(day>21){alert("巨蟹座")}
			else alert("双子座");
			break;
		case "07":
			if(day>22){alert("狮子座")}
			else alert("巨蟹座");
			break;
		case "08":
			if(day>22){alert("处女座")}
			else alert("狮子座");
			break;
		case "09":
			if(day>22){alert("天秤座")}
			else alert("处女座");
			break;
		case "10":
			if(day>23){alert("天蝎座")}
			else alert("天秤座");
			break;
		case "11":
			if(day>20){alert("射手座")}
			else alert("天蝎座");
			break;
		case "12":
			if(day>21){alert("摩羯座")}
			else alert("射手座");
			break;
			
	}
}
	
</script>
</body>
</html>

三、结果

四、总结 

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

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

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

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

相关文章

  • JavaScript onclick点击事件-点击切换图片且自动播放

    JavaScript onclick点击事件-点击切换图片且自动播放

    这篇文章主要介绍了JavaScript onclick点击事件-点击切换图片且自动播放,在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片,下面来看看具体的实现过程吧
    2022-01-01
  • JS的执行机制(EventLoop、宏任务和微任务)

    JS的执行机制(EventLoop、宏任务和微任务)

    这篇文章主要介绍了JS的执行机制(EventLoop、宏任务和微任务),具有很好的参考价值,希望对大家有所帮助。
    2023-01-01
  • 基于JS实现无缝滚动思路及代码分享

    基于JS实现无缝滚动思路及代码分享

    无缝滚动效果在各大网站都有这样的需求,应用非常广泛,下面小编给大家分享基于JS实现无缝滚动思路及代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-06-06
  • 利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    本篇文章主要介绍了c#+Plupload.js解决大容量文件上传问题, 带进度条和背景遮罩层,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 手把手教你 CKEDITOR 4 扩展插件制作

    手把手教你 CKEDITOR 4 扩展插件制作

    这篇文章主要介绍了手把手教你 CKEDITOR 4 扩展插件制作,结合具体实例形式详细分析了CKEditor4插件制作的步骤与相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • JS栈stack类的实现与使用方法示例

    JS栈stack类的实现与使用方法示例

    这篇文章主要介绍了JS栈stack类的实现与使用方法,结合实例形式分析了栈的原理,以及javascript定义与使用栈的基本操作技巧,需要的朋友可以参考下
    2019-01-01
  • js精确的加减乘除实例

    js精确的加减乘除实例

    下面小编就为大家带来一篇js精确的加减乘除实例,具有非常好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • javascript二维数组和对象的深拷贝与浅拷贝实例分析

    javascript二维数组和对象的深拷贝与浅拷贝实例分析

    这篇文章主要介绍了javascript二维数组和对象的深拷贝与浅拷贝,结合实例形式分析了JavaScript针对数组与对象的深拷贝及浅拷贝相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • 手机安装GreasyFork油猴js脚本的教程

    手机安装GreasyFork油猴js脚本的教程

    Iceraven浏览器需要安装Tampermonkey插件来安装GF油猴脚本,本文给大家介绍手机安装GreasyFork油猴js脚本的教程,安装过程给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-12-12
  • MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法

    通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下
    2013-11-11

最新评论