实现效果图如下
实现逻辑：
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>
)
