JavaScript implements constellation query function with detailed code

JavaScript implements constellation query function with detailed code

1. Title

Enter a birthday value in the text box and click the button to display the corresponding zodiac sign for this birthday. Define a function that receives a birthday value (a 4-digit string consisting of month and day, such as "0210", "1225", etc.) and indicates the zodiac sign based on the birthday value.

2. Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zodiac Query</title>
</head>
 
<body>
<p align="center">
	Please enter a birthday value (eg: 0123):
	<input type="text" id="t1">	
	<input type="button" value="Show constellations" onclick="show()"/>
</p>
 
<script>
	function show(){
	var c1=document.getElementById("t1").value; //Get the value in the text box //alert(c1);
	var month=c1.substring(0,2);
	var day = parseInt(c1.substring(2));
	switch(month){
		case "01":
			if(day>19){alert("Aquarius")}
			else alert("Capricorn");
			break;
		case "02":
			if(day>18){alert("Pisces")}
			else alert("Aquarius");
			break;
		case "03":
			if(day>20){alert("Aries")}
			else alert("Pisces");
			break;
		case "04":
			if(day>19){alert("Taurus")}
			else alert("Aries");
			break;
		case "05":
			if(day>20){alert("Gemini")}
			else alert("Taurus");
			break;
		case "06":
			if(day>21){alert("Cancer")}
			else alert("Gemini");
			break;
		case "07":
			if(day>22){alert("Leo")}
			else alert("Cancer");
			break;
		case "08":
			if(day>22){alert("Virgo")}
			else alert("Leo");
			break;
		case "09":
			if(day>22){alert("Libra")}
			else alert("Virgo");
			break;
		case "10":
			if(day>23){alert("Scorpio")}
			else alert("Libra");
			break;
		case "11":
			if(day>20){alert("Sagittarius")}
			else alert("Scorpio");
			break;
		case "12":
			if(day>21){alert("Capricorn")}
			else alert("Sagittarius");
			break;
			
	}
}
	
</script>
</body>
</html>

3. Results

IV. Conclusion

1. First of all, we need to understand the corresponding relationship between constellations and dates:

2. substring(start,end) will return a string containing the substring from start to the end (excluding end);

The parseInt() function parses a string and returns an integer.

This concludes this article about implementing the constellation query function with JavaScript and attached detailed code. For more relevant js constellation query content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JS simple implementation method to calculate the constellation based on the birthday month and date
  • js date, constellation cascade display code
  • js sample code to judge the constellation according to the date
  • JavaScript calculation of constellation zodiac sign (zodiac sign) sample code
  • js code to automatically obtain the constellation according to the date of birth

<<:  CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box

>>:  Detailed explanation of how to configure openGauss database in docker

Recommend

Several ways to improve the readability of web pages

1. Use contrasting colours. The contrast here ref...

A brief discussion on the performance issues of MySQL paging limit

MySQL paging queries are usually implemented thro...

Practical operation of using any font in a web page with demonstration

I have done some research on "embedding non-...

Solution to HTML encoding problem in IE6 that causes JS error and CSS not being applied

It was found in the test that when the page defini...

How to install docker using YUM

As shown in the following figure: If the version ...

MySQL 5.7.23 decompression version installation tutorial with pictures and text

Download the MySQL installer Official download ad...

CSS Naming: BEM, scoped CSS, CSS modules and CSS-in-JS explained

The scope of css is global. As the project gets b...

The table table uses: nth-child() to achieve alternate color change and alignment

Core code <!DOCTYPE html> <html lang=&qu...

IDEA configuration process of Docker

IDEA is the most commonly used development tool f...

Implementation code of Nginx anti-hotlink and optimization in Linux

Hide version number The version number is not hid...

Connector configuration in Tomcat

JBoss uses Tomcat as the Web container, so the co...

Two ways to implement square div using CSS

Goal: Create a square whose side length is equal ...

Reasons and solutions for the failure of React event throttling effect

Table of contents The problem here is: Solution 1...

Completely uninstall MySQL database in Windows system to reinstall MySQL

1. In the control panel, uninstall all components...

js returns to the previous page and refreshes the code

1. Javascript returns to the previous page history...