JavaScript實現(xiàn)星座查詢功能 附詳細(xì)代碼
更新時間：2021年11月02日 16:33:47 作者：少有摯友Y
最近小編在做一個項目，其中涉及到一個模塊關(guān)于星座查詢功能，即在文本框中輸入一個生日值，點擊按鈕可以得到對應(yīng)的星座，怎么實現(xiàn)這個需求呢？下面小編通過示例代碼給大家介紹下，需要的朋友參考下吧
一、題目
在文本框中輸入一個生日值，點擊按鈕，可以顯示此生日的對應(yīng)星座。定義一個函數(shù)，該函數(shù)用來接收一個生日值（月日組成的4位字符串，比如“0210”，“1225”等），并根據(jù)該生日值提示屬于的星座。
二、代碼
<!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>
三、結(jié)果
四、總結(jié)
1、首先要清楚星座與日期之間的對應(yīng)的關(guān)系：
2、 substring(start,end)將返回一個包含從start到最后（不包括end）的子字符串的字符串；
parseInt()函數(shù)可解析一個字符串，并返回一個整數(shù)。
到此這篇關(guān)于JavaScript實現(xiàn)星座查詢功能 附詳細(xì)代碼的文章就介紹到這了,更多相關(guān)js星座查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript?onclick點擊事件-點擊切換圖片且自動播放
這篇文章主要介紹了JavaScript?onclick點擊事件-點擊切換圖片且自動播放，在頁面中放圖片并設(shè)置四個button，可以通過點擊上一張下一張來切換圖片，下面來看看具體的實現(xiàn)過程吧2022-01-01
JS的執(zhí)行機制(EventLoop、宏任務(wù)和微任務(wù))
這篇文章主要介紹了JS的執(zhí)行機制(EventLoop、宏任務(wù)和微任務(wù))，具有很好的參考價值，希望對大家有所幫助。2023-01-01
無縫滾動效果在各大網(wǎng)站都有這樣的需求，應(yīng)用非常廣泛，下面小編給大家分享基于JS實現(xiàn)無縫滾動思路及代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-06-06
利用Plupload.js解決大文件上傳問題, 帶進度條和背景遮罩層
本篇文章主要介紹了c#+Plupload.js解決大容量文件上傳問題, 帶進度條和背景遮罩層，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了手把手教你 CKEDITOR 4 擴展插件制作,結(jié)合具體實例形式詳細(xì)分析了CKEditor4插件制作的步驟與相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS棧stack類的實現(xiàn)與使用方法,結(jié)合實例形式分析了棧的原理,以及javascript定義與使用棧的基本操作技巧,需要的朋友可以參考下2019-01-01
下面小編就為大家?guī)硪黄猨s精確的加減乘除實例，具有非常好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
javascript二維數(shù)組和對象的深拷貝與淺拷貝實例分析
這篇文章主要介紹了javascript二維數(shù)組和對象的深拷貝與淺拷貝,結(jié)合實例形式分析了JavaScript針對數(shù)組與對象的深拷貝及淺拷貝相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
Iceraven瀏覽器需要安裝Tampermonkey插件來安裝GF油猴腳本，本文給大家介紹手機安裝GreasyFork油猴js腳本的教程，安裝過程給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-12-12
通過js寫一個web工程的相關(guān)頁面時感覺很卡，修改內(nèi)存也不行下面有兩種解決方法，大家可以嘗試下2013-11-11