继续修改原神角色数据列表

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神4.8版本获得角色数据表</title>
</head>
<style>
    #GenshinRoleTableContainer {
        display: flex;
        table {
            border-collapse: collapse;
            caption {
                background-color: #80a4b1;
                border-radius: 5px 5px 0 0;
            }
            th,
            td {
                text-align: center;
                border: 1px solid #ddd;
            }
            th {
                background-color: #9f9e9e;
            }
            td {
                color: hsl(0, 0%, 100%);
                text-shadow: 1px 1px 1px #030303;
            }
        }
        /* 列表 */
        #GenshinRoleTable,
        #cultivateGenshinRole,
        #haveGenshinRole {
            margin-top: 45px;
        }
        /* 鼠标移入显示图片添加过渡效果 */
        .zoom-image {
            transition: transform 0.3s ease-in-out;
        }
        /* 按钮√ */
        .cultivate,
        .checkButton {
            background-color: #f9030300;
            height: 15px;
            width: 25px;
            border-top: none;
            border-right: none;
            border-radius: 0;
            transform: rotate(-45deg);
            transition: all 0.5s ease-in-out;
        }
    }
</style>
<body>
    <div id="GenshinRoleTableContainer">
        <div>
            <table id="GenshinRoleTable"></table>
        </div>
        <div>
            <table id="haveGenshinRole"></table>
        </div>
        <div>
            <table id="cultivateGenshinRole"></table>
        </div>
    </div>
</body>
<!-- 引入(原神角色数据,拥有角色数据,重点培养角色数据)js文件 -->
<script src="D:/data/原神/GenshinRole.js"></script>
<script src="D:/data/原神/haveGenshinRole.js"></script>
<script>
    /* 元素颜色数据*/
    // 根据元素名称获取对应的颜色
    function getElementColor(element) {
        const colors = {
            "火": "#FF9933",
            "水": "#3399FF",
            "风": "#66c6ac",
            "雷": "#CC66FF",
            "草": "#66CC66",
            "冰": "#99CCFF",
            "岩": "#FFCC33"
        };
        return colors[element];
    }
    /* 元素颜色数据 结束*/
    /*根据元素名称获取对应的元素图片*/
    function getElementImage(element) {
        const foundElement = GenshinRole.find(e => e.element === element);
        return foundElement ? foundElement.elementImage : "";
    }
    /*根据元素名称获取对应的元素图片 结束*/
    /* 根据角色名称获取对应的角色图片*/
    function getCharacterImage(role) {
        for (const element of GenshinRole) {
            const foundRole = element.role.find(r => r.name === role);
            if (foundRole) {
                return foundRole.image;
            }
        }
        return "";
    }
    /* 根据角色名称获取对应的角色图片 结束*/
    /*原神角色数据列表 开始*/
    function GenshinRoleTable() {
        // 获取表格元素
        const GenshinRoleTable = document.getElementById("GenshinRoleTable");
        // 设置表格的初始HTML结构
        GenshinRoleTable.innerHTML = `
<caption>
    <b>原神4.8版本角色数据</b>
      <a href="https://genshin-builds.com/cn/characters" target="_blank">数据来源:(genshin-builds.com)</a>
</caption>
<tr>
    <th>序号</th>
    <th colspan="2">元素</th>
    <th colspan="2">角色</th>
    <th>获得</th>
</tr>
`;
        let row = 1; // 初始化行号
        let lastElement = null; // 用于记录上一个元素,避免重复插入元素图标
        // 遍历角色数据
        GenshinRole.forEach((elementData, i) => {
            let elementIndex = 1; // 重置元素角色序号
            // 遍历每个元素的角色
            elementData.role.forEach((character, j) => {
                const newRow = GenshinRoleTable.insertRow(); // 插入新行
                newRow.insertCell().textContent = row++; // 插入序号单元格
                // 如果当前元素与上一个元素不同,插入元素图标
                if (elementData.element !== lastElement) {
                    const elementCell = newRow.insertCell();
                    elementCell.rowSpan = elementData.role.length; // 设置元素单元格的行跨度
                    const elementImage = document.createElement('img'); // 创建元素图标
                    elementImage.src = getElementImage(elementData.element); // 设置图标路径
                    elementImage.style.width = '24px'; // 设置图标宽度
                    elementImage.onerror = function () {
                        elementCell.textContent = elementData.element; // 如果图标加载失败,显示元素名称
                    };
                    elementImage.title = elementData.element; // 添加title属性显示元素名称
                    elementCell.appendChild(elementImage); // 将图标添加到单元格
                    lastElement = elementData.element; // 更新上一个元素
                }
                newRow.insertCell().textContent = elementIndex++; // 显示元素角色序号
                const characterImageCell = newRow.insertCell(); // 插入角色图标单元格
                const characterImage = document.createElement('img'); // 创建角色图标
                characterImage.src = getCharacterImage(character.name); // 设置图标路径
                characterImage.style.width = '48px'; // 设置图标宽度
                characterImageCell.appendChild(characterImage); // 将图标添加到单元格
                const roleCell = newRow.insertCell(); // 插入角色名称单元格
                roleCell.textContent = character.name; // 设置角色名称
                roleCell.style.color = character.star === "5" ? "#ac7647" : "#846baa"; // 根据星级设置颜色
                const addButtonCell = newRow.insertCell(); // 插入"拥有"按钮单元格
                // 检查角色是否在 haveGenshinRole 中
                const isInHaveGenshinRole = haveGenshinRole.some(e => e.role.some(r => r.name === character.name));
                if (!isInHaveGenshinRole) {
                    const addButton1 = document.createElement('button'); // 创建第一个按钮
                    addButton1.textContent = '没有'; // 设置第一个按钮文本
                    addButtonCell.appendChild(addButton1); // 将第一个按钮添加到单元格
                } else {
                    const addButton2 = document.createElement('button'); // 创建第二个按钮
                    addButton2.textContent = ''; // 设置第二个按钮文本
                    addButton2.className = 'checkButton'; // 设置按钮的类名为 'checkButton'
                    addButtonCell.appendChild(addButton2); // 将第二个按钮添加到单元格
                }
                newRow.style.backgroundColor = getElementColor(elementData.element); // 根据元素设置行背景颜色
                // 打印角色名称到控制台
                // console.log(character.name);
            });
        });
    }
    GenshinRoleTable(); // 调用函数渲染表格
    /*原神角色数据列表 结束*/
    /* 获得角色数据列表*/
    function renderTable() {
        const haveGenshinRoleTable = document.getElementById("haveGenshinRole");
        initializeTable(haveGenshinRoleTable, "获得角色数据", true); // 修改这里,将 isAddButton 设置为 true
        let row = 1; // 初始化序号
        haveGenshinRole.forEach((elementData) => {
            elementData.role.forEach((character) => {
                addCharacterRow(haveGenshinRoleTable, character, elementData.element, row++);
            });
        });
        // 新增代码:渲染重点培养角色表格
        const cultivateGenshinRoleTable = document.getElementById("cultivateGenshinRole");
        initializeTable(cultivateGenshinRoleTable, "重点培养的角色", false);
        row = 1; // 重置序号
        cultivateGenshinRole.forEach((character) => {
            const elementData = haveGenshinRole.find(e => e.role.some(r => r.name === character.name));
            if (elementData) {
                const fullCharacterData = elementData.role.find(r => r.name === character.name);
                addCharacterRow(cultivateGenshinRoleTable, fullCharacterData, elementData.element, row++);
            }
        });
    }
    let isSorted = false; // 记录当前是否已经排序
    // 初始化表格
    function initializeTable(table, captionText, isAddButton = false) {
        table.innerHTML = `
<caption>
    <b>${captionText}</b>  
</caption>
<tr>
    <th>序号</th>
    <th>角色</th>
    <th class="hidden-star">星级</th>
    <th>等级</th>
    <th>命座</th>
    <th style="width:100px;">天赋</th>
    <th>备注</th>
</tr>
`;
        // 为"命座"按钮添加点击事件监听器
        if (isAddButton) {
            const sortButton = document.createElement('button');
            sortButton.id = 'sortButton';
            sortButton.innerHTML = '品质排序';
            // 将按钮直接插入到标题行中
            table.querySelector('caption b').insertAdjacentElement('afterend', sortButton);
            sortButton.addEventListener('click', () => {
                isSorted = !isSorted; // 切换排序状态
                sortTable(table, isSorted);
            });
        }
        // 添加CSS类来隐藏星级列
        table.querySelectorAll('.hidden-star').forEach(th => th.style.display = 'none');
    }
    // 排序表格
    function sortTable(table, isSorted) {
        const rows = Array.from(table.rows).slice(1); // 获取所有行,排除表头
        if (isSorted) {
            rows.sort((a, b) => {
                const starA = a.cells[2].textContent;
                const starB = b.cells[2].textContent;
                const constellationA = parseInt(a.cells[4].textContent, 10);
                const constellationB = parseInt(b.cells[4].textContent, 10);
                if (starA === "5" && starB !== "5") {
                    return -1;
                } else if (starA !== "5" && starB === "5") {
                    return 1;
                } else {
                    return constellationB - constellationA;
                }
            });
        } else {
            // 恢复默认排序,按照添加的顺序
            rows.sort((a, b) => {
                const indexA = parseInt(a.cells[0].textContent, 10);
                const indexB = parseInt(b.cells[0].textContent, 10);
                return indexA - indexB;
            });
        }
        // 清空表格并重新插入排序后的行
        while (table.rows.length > 1) {
            table.deleteRow(1);
        }
        rows.forEach(row => {
            table.appendChild(row);
            // 检查星级和命座,设置背景颜色
            const star = row.cells[2].textContent;
            const constellation = parseInt(row.cells[4].textContent, 10);
            if (star === "5" || constellation === 6) {
                row.cells[1].style.backgroundColor = 'yellow'; // 设置显眼的背景颜色
                row.cells[3].style.backgroundColor = 'yellow'; // 设置显眼的背景颜色
                row.cells[4].style.backgroundColor = 'yellow'; // 设置显眼的背景颜色
                row.cells[5].style.backgroundColor = 'yellow'; // 设置显眼的背景颜色
            } else {
                row.cells[1].style.backgroundColor = ''; // 恢复默认背景颜色
                row.cells[3].style.backgroundColor = ''; // 恢复默认背景颜色
                row.cells[4].style.backgroundColor = ''; // 恢复默认背景颜色
                row.cells[5].style.backgroundColor = ''; // 恢复默认背景颜色
            }
        });
    }
    // 添加角色行
    function addCharacterRow(table, character, element, rowNumber) {
        const newRow = table.insertRow();
        newRow.insertCell().textContent = rowNumber; // 使用row变量作为序号
        const roleCell = newRow.insertCell();
        roleCell.textContent = character.name;
        // 检查角色是否在 cultivateGenshinRole 列表中
        const isCultivateRole = cultivateGenshinRole.some(c => c.name === character.name);
        if (isCultivateRole && table.id === "haveGenshinRole") {
            // 添加类名为 .cultivate 的按钮
            const cultivateButton = document.createElement('button');
            cultivateButton.className = 'cultivate';
            roleCell.appendChild(cultivateButton);
        }
        const star = getStar(character.name, element);
        roleCell.style.color = star === "5" ? "#ac7647" : "#846baa";
        const starCell = newRow.insertCell();
        starCell.textContent = star; // 显示星级
        starCell.style.display = 'none'; // 隐藏星级单元格
        newRow.insertCell().innerHTML = `<span >${character.level}</span>`;
        newRow.insertCell().innerHTML = `<span >${character.constellation}</span>`;
        newRow.insertCell().innerHTML = `<span >${character.talent}</span>`;
        newRow.insertCell().innerHTML = `<span >${character.note}</span>`;
        newRow.style.backgroundColor = getElementColor(element);
        // 添加鼠标进入角色名称单元格时显示放大角色图标的功能
        roleCell.addEventListener('mouseenter', (event) => showZoomImage(character.name, event));
        // 添加鼠标离开角色名称单元格时移除放大角色图标的功能
        roleCell.addEventListener('mouseleave', hideZoomImage);
    }
    // 获取角色星级
    function getStar(roleName, element) {
        const elementData = GenshinRole.find(e => e.element === element);
        if (elementData) {
            const role = elementData.role.find(r => r.name === roleName);
            return role ? role.star : "";
        }
        return "";
    }
    // 显示放大角色图标
    function showZoomImage(roleName, event) {
        const img = createZoomImage(roleName, event);
        document.body.appendChild(img);
    }
    // 创建放大角色图标
    function createZoomImage(roleName, event) {
        const img = document.createElement('img');
        img.src = getCharacterImage(roleName);
        img.style.transform = 'scale(3)';
        img.style.position = 'fixed';
        img.style.zIndex = '1000';
        img.style.left = `${event.clientX + 10}px`;
        img.style.top = `${event.clientY + 10}px`;
        img.classList.add('zoom-image'); // 添加过渡效果类
        if (event.clientY + img.height + 20 > window.innerHeight) {
            img.style.top = `${event.clientY - img.height - 10}px`;
        }
        return img;
    }
    // 隐藏放大角色图标
    function hideZoomImage() {
        const img = document.querySelector('img.zoom-image');
        if (img) {
            img.remove();
        }
    }
    renderTable();
    /* 获得角色数据列表 结束*/
</script>
</html>
javascript 复制代码
 /* 原神4.8版本角色数据*/
 const GenshinRole = [
    {
        element: "火", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Pyro.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "阿蕾奇诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arlecchino/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "林尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lyney/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "迪希雅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dehya/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "迪卢克", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diluc/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "胡桃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/hu_tao/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "可莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/klee/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "宵宫", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yoimiya/image.png?strip=all&amp;quality=100&amp;w=140" },
            { star: "4", name: "托马", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/thoma/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "烟绯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yanfei/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "香菱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xiangling/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "班尼特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/bennett/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "安柏", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/amber/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "辛焱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xinyan/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "嘉明", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/gaming/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "夏沃蕾", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chevreuse/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "旅行者 (火)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_electro/image.png?strip=all&quality=100&w=140" },
        ]
    },
    {
        element: "水", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Hydro.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "妮露", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/nilou/image.png?strip=all&amp;quality=100&amp;w=140" },
            { star: "5", name: "莫娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mona/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "达达利亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/tartaglia/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "珊瑚宫心海", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sangonomiya_kokomi/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "希格雯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sigewinne/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "夜兰", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yelan/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "神里绫人", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kamisato_ayato/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "芙宁娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/furina/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "那维莱特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/neuvillette/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "芭芭拉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/barbara/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "行秋", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xingqiu/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "坎蒂丝", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/candace/image.png?strip=all&amp;quality=100&amp;w=140" },
            { star: "5", name: "旅行者 (水)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_anemo/image.png?strip=all&quality=100&w=140" },
        ]
    },
    {
        element: "风", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Anemo.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "温迪", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/venti/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "琴", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/jean/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "魈", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xiao/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "闲云", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xianyun/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "枫原万叶", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaedehara_kazuha/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "流浪者", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/wanderer/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "珐露珊", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/faruzan/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "砂糖", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sucrose/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "鹿野院平藏", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/shikanoin_heizou/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "琳妮特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lynette/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "早柚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sayu/image.png?strip=all&amp;quality=100&amp;w=140" },
            { star: "5", name: "旅行者 (风)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_anemo/image.png?strip=all&quality=100&w=140" },
        ]
    },
    {
        element: "雷", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Electro.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "刻晴", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/keqing/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "雷电将军", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/raiden_shogun/image.png?strip=all&quality=100&w=140" },
            { star: "5", name: "八重神子", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yae_miko/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "克洛琳德", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/clorinde/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "赛诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/cyno/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "菲谢尔", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/fischl/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "北斗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/beidou/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "丽莎", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lisa/image.png?strip=all&quality=100&w=140" },
            { star: "4", name: "雷泽", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/razor/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "赛索斯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sethos/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "多莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dori/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "久岐忍", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kuki_shinobu/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "九条裟罗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kujou_sara/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "旅行者 (雷)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_dendro/image.png?strip=all&quality=100&w=140" }
        ]
    },
    {
        element: "草", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Dendro.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "艾梅莉埃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/emilie/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "艾尔海森", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/alhaitham/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "白术", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/baizhu/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "纳西妲", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/nahida/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "提纳里", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/tighnari/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "绮良良", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kirara/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "卡维", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaveh/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "瑶瑶", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yaoyao/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "柯莱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/collei/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "旅行者 (草)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_dendro/image.png?strip=all&quality=100&w=140" }
        ]
    },
    {
        element: "冰", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Cryo.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "莱欧斯利", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/wriothesley/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "七七", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/qiqi/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "甘雨", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/ganyu/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "申鹤", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/shenhe/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "神里绫华", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kamisato_ayaka/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "埃洛伊", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/aloy/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "优菈", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/eula/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "菲米尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/freminet/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "米卡", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mika/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "莱依拉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/layla/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "罗莎莉亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/rosaria/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "迪奥娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diona/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "重云", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chongyun/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "凯亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaeya/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "夏洛蒂", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/charlotte/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "旅行者 (冰)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_geo/image.png?strip=all&quality=100&w=140" }
        ]
    },
    {
        element: "岩", // 元素类型
        elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Geo.png?strip=all&quality=75&w=48", // 元素图标
        role: [
            { star: "5", name: "千织", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chiori/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "娜维娅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/navia/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "荒泷一斗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arataki_itto/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "阿贝多", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/albedo/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "钟离", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/zhongli/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "云堇", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yun_jin/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "五郎", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/gorou/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "凝光", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/ningguang/image.png?strip=all&quality=100&w=140", },
            { star: "4", name: "诺艾尔", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/noelle/image.png?strip=all&quality=100&w=140", },
            { star: "5", name: "旅行者 (岩)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_geo/image.png?strip=all&quality=100&w=140", },
        ]
    }
];
/* 原神4.8版本角色数据 结束*/
javascript 复制代码
/*培养数据*/
const cultivateGenshinRole = [
    { name: "宵宫" },
    { name: "夜兰" },
    { name: "班尼特" },
    { name: "钟离" },
    { name: "雷电将军" },
    { name: "枫原万叶" },
    { name: "行秋" },
    { name: "瑶瑶" }
];
/*培养数据* 结束*/
/* 134角色数据*/
const haveGenshinRole = [
    {
        element: "火", // 元素类型
        role: [
            { name: "迪卢克", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "宵宫", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
            { name: "迪希雅", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
            { name: "托马", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "烟绯", level: 80, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "香菱", level: 90, constellation: 3, talent: "1/1/1", note: "备注" },
            { name: "班尼特", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },
            { name: "安柏", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },
            // { name: "辛焱", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "嘉明", level: 20, constellation: 4, talent: "1/1/1", note: "备注" },
            { name: "夏沃蕾", level: 80, constellation: 0, talent: "1/1/1", note: "备注" },
        ]
    },
    {
        element: "水", // 元素类型
        role: [
            { name: "珊瑚宫心海", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "夜兰", level: 90, constellation: 2, talent: "1/1/1", note: "备注" },
            { name: "芙宁娜", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
            // { name: "那维莱特", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "芭芭拉", level: 60, constellation: 3, talent: "1/1/1", note: "备注" },
            { name: "行秋", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "坎蒂丝", level: 19, constellation: 1, talent: "1/1/1", note: "备注" },
        ]
    },
    {
        element: "风", // 元素类型
        role: [
            { name: "琴", level: 60, constellation: 2, talent: "1/1/1", note: "备注" },
            { name: "枫原万叶", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
            { name: "流浪者", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "珐露珊", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },
            { name: "砂糖", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },
            { name: "鹿野院平藏", level: 20, constellation: 5, talent: "1/1/1", note: "备注" },
            { name: "琳妮特", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "早柚", level: 80, constellation: 6, talent: "1/1/1", note: "备注" },
        ]
    },
    {
        element: "雷", // 元素类型
        role: [
            { name: "刻晴", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
            { name: "雷电将军", level: 90, constellation: 3, talent: "1/1/1", note: "备注" },
            { name: "菲谢尔", level: 90, constellation: 3, talent: "1/1/1", note: "备注" },
            { name: "北斗", level: 20, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "丽莎", level: 60, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "雷泽", level: 50, constellation: 2, talent: "1/1/1", note: "备注" },
            // { name: "赛索斯", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "多莉", level: 20, constellation: 4, talent: "1/1/1", note: "备注" },
            { name: "久岐忍", level: 90, constellation: 4, talent: "1/1/1", note: "备注" },
            { name: "九条裟罗", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },
        ]
    },
    {
        element: "草", // 元素类型
        role: [
            { name: "纳西妲", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "提纳里", level: 70, constellation: 2, talent: "1/1/1", note: "备注" },
            { name: "绮良良", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "卡维", level: 20, constellation: 1, talent: "1/1/1", note: "备注" },
            { name: "瑶瑶", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "柯莱", level: 20, constellation: 6, talent: "1/1/1", note: "备注" },
            // { name: "旅行者 (草)", level: 1, constellation: 0, talent: "1/1/1", note: "备注" }
        ]
    },
    {
        element: "冰", // 元素类型
        role: [
            { name: "七七", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
            // { name: "优菈", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "菲米尼", level: 20, constellation: 5, talent: "1/1/1", note: "备注" },
            { name: "米卡", level: 20, constellation: 1, talent: "1/1/1", note: "备注" },
            { name: "莱依拉", level: 40, constellation: 3, talent: "1/1/1", note: "备注" },
            { name: "罗莎莉亚", level: 20, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "迪奥娜", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "重云", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "凯亚", level: 60, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "夏洛蒂", level: 50, constellation: 4, talent: "1/1/1", note: "备注" },
        ]
    },
    {
        element: "岩", // 元素类型
        role: [
            { name: "钟离", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "云堇", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },
            { name: "五郎", level: 20, constellation: 3, talent: "1/1/1", note: "备注" },
            { name: "凝光", level: 70, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "诺艾尔", level: 80, constellation: 6, talent: "1/1/1", note: "备注" },
            { name: "旅行者 (岩)", level: 80, constellation: 6, talent: "1/1/1", note: "备注" }
        ]
    }
];
/* 134角色数据 结束*/
相关推荐
Mr_Xuhhh7 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js