0047 JavaScript實現根據輸入日期計算所屬星座

前一節課，通過JavaScript來實現在網頁上進行四則運算。

這節課，參照以前第1章裡面的根據輸入日期計算所屬星座。

程序設計思路

在網頁上顯示2個文本輸入框，一個是月份，一個是日期。

點擊計算按鈕後，將計算的結果顯示在下方的結果部分。

如果日期輸入超過範圍，則在點擊計算按鈕時進行alert提示。

大概的樣子是這樣的：

編寫頁面顯示效果

可以參照上節課的網頁的樣式，先編寫網頁內容和對應的樣式。

新建3個文件，xingzuo.html，xingzuo.css，xingzuo.js。

xingzuo.html代碼如下：

xingzuo.css代碼如下：

瀏覽器打開html文件，查看網頁效果：

計算邏輯

修改html文件，在計算按鈕上增加事件代碼，調用jisuan函數，然後將計算結果的內容刪除掉。

xingzuo.html代碼修改如下：

然後打開xingzuo.js，新增jisuan函數，然後參照之前的python代碼，編寫JavaScript代碼。

xingzuo.js代碼如下：

刷新網頁：

輸入日期3月20日，然後點擊檢查按鈕：

可以看到結果正確。

重新輸入日期4月21日，然後點擊檢查按鈕：

然後重新故意輸入一個錯誤的2月30日，然後點擊檢查按鈕：

可以看到提示錯誤的日期範圍。

然後可以測試所有的錯誤情況，以及每個月都測試4個日期，月頭月尾，兩個星座的分隔日期。確保所有的情況下程序都是正確的。

使用數組來簡化代碼

和python編程一樣，同樣可以使用數組來簡化代碼。

修改xingzuo.js代碼如下：

然後再次測試所有的情況，可以看到，不同的寫法能夠實現同樣的效果，可以讓代碼變得更簡潔。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！