当前位置：首页 > news >正文

js实现生肖宜忌展示

news 来源：原创 2025/6/29 10:18:30

实现效果图如下
请添加图片描述
实现逻辑：
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>