實現效果圖如下
實現邏輯：
1.錄入屬相列表（列表順序不可調整）；
2.錄入各屬相相宜、相忌屬相；
3.輸入年份后，根據屬相列表獲取到正確的屬相；
4.根據獲取的屬相去展示宜、忌屬相；
5.打印年份前后十年宜、忌屬相。
全部代碼如下：
shuxiang.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>獲取屬相</title><style>* {margin: auto;padding: auto;text-align: center;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin-right: 10px;}table {border-collapse: collapse;border-spacing: 0;width: 500px;border: 1px solid black;text-align: center;}caption {font-weight: bold;line-height: 40px;}th,td {border: 1px solid black;}#zodiacList {display: none;}#zodiacTabooTable,#zodiacListTable {display: none;}</style><script>// 數據初始化const zodiacs = ['鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬'];const zodiacObjectList = {'鼠': { 0: "龍、猴、牛", 1: '羊、馬、兔、雞' },'牛': { 0: "鼠、蛇、雞", 1: '龍、馬、羊、狗、兔' },'虎': { 0: "馬、狗", 1: '蛇、猴' },'兔': { 0: "羊、狗、豬", 1: '鼠、牛、龍、雞、馬' },'龍': { 0: "鼠、猴、雞", 1: '狗、牛、龍、兔' },'蛇': { 0: "牛、雞", 1: '虎、猴、豬' },'馬': { 0: "虎、羊、狗", 1: '鼠、牛、兔、馬' },'羊': { 0: "兔、馬、豬", 1: '鼠、牛、狗' },'猴': { 0: "鼠、龍", 1: '虎、蛇、豬' },'雞': { 0: "牛、龍、蛇", 1: '兔、雞、狗' },'狗': { 0: "虎、兔、馬", 1: '牛、龍、羊、雞' },'豬': { 0: "羊、兔", 1: '蛇、豬、猴' }};// 獲取屬相function getZodiac(year) {const baseYear = 1780;const index = (year - baseYear) % 12;return zodiacs[index];}// 判斷適宜屬相function isSuitableZodiac(zodiac) {const zodiacTabooTable = document.getElementById('zodiacTabooTable');zodiacTabooTable.style.display = 'table';const zodiacTabooList = document.getElementById('zodiacTabooList');const zodiacObject = zodiacObjectList[zodiac];zodiacTabooList.innerHTML = `<td>${zodiac}</td> <td>${zodiacObject[0]}</td> <td>${zodiacObject[1]}</td>`;return zodiacObject;}// 獲取輸入年份前后x年的屬相，并生成列表function showZodiacList(year, obj) {const zodiacOkList = obj[0].split('、');const zodiacErrorList = obj[1].split('、');const zodiacList = document.getElementById('zodiacList');zodiacList.style.display = 'table';zodiacList.innerHTML = `<caption>前后10年屬相對應年份</caption><tr><td>年份</td><td>屬相</td></tr>`;for (let i = year - 10; i <= year + 10; i++) {const listMenth = document.createElement('tr');listMenth.innerHTML = `<td>${i}</td> <td>${getZodiac(i)}</td>`;const zodiac = getZodiac(i);if (zodiacOkList.includes(zodiac)) {listMenth.style.backgroundColor = 'green';listMenth.style.color = 'white';} else if (zodiacErrorList.includes(zodiac)) {listMenth.style.backgroundColor = 'red';listMenth.style.color = 'black';}if (i === year) {listMenth.style.backgroundColor = 'yellow';}zodiacList.appendChild(listMenth);}}// 獲取年份并顯示對應的屬相function showZodiac() {const yearInput = document.getElementById('yearInput');const zodiacOutput = document.getElementById('zodiacOutput');const year = parseInt(yearInput.value);yearInput.value = '';if (year >= 1900 && year <= 2999) {if (String(yearInput.value).includes('.')) {zodiacOutput.textContent = '請輸入一個整數年份';} else {const zodiac = getZodiac(year);const SuitableZodiac = isSuitableZodiac(zodiac);zodiacOutput.textContent = `${year}年對應的屬相是：${zodiac}`;showZodiacList(year, SuitableZodiac);}} else {zodiacOutput.textContent = '請輸入一個有效的年份(1900~2999)';}}</script>
</head><body><label for="yearInput">輸入年份：</label><input type="number" id="yearInput" min="1900" max="2999" step="1" value=""><button onclick="showZodiac()">獲取屬相</button><p id="zodiacOutput"></p><table id="zodiacTabooTable"><caption>屬相宜忌</caption><tr><th>屬相</th><th>宜</th><th>忌</th></tr><tr id="zodiacTabooList"></tr><caption>綠色表示適宜，紅色表示相忌。</caption></table><table id="zodiacList"></table>
</body></html>
)
