修改原神4.8版本角色列表

于 2024-08-22 23:24:19 发布
阅读量44 收藏
点赞数 2
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulei5153/article/details/141440279
版权 

<!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 {
        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 {
            margin-top: 45px;

            /* 添加过渡效果 */
            .zoom-image {
                transition: transform 0.3s ease-in-out;
            }
        }
    }
</style>

<body>
    <div id="GenshinRoleTableContainer">
        <!-- 原神角色列表 -->
        <table id="GenshinRoleTable"></table>
    </div>
</body>
<!-- <script src="D:/data/原神/原神4.8版本角色数据.js"></script> -->
<script>
    /* 原神4.8版本角色数据*/
    const characters = [
        {
            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版本角色数据 结束*/
    /* 元素颜色数据*/
    // 根据元素名称获取对应的颜色
    function getElementColor(element) {
        const colors = {
            "火": "#FF9933",
            "水": "#3399FF",
            "风": "#66c6ac",
            "雷": "#CC66FF",
            "草": "#66CC66",
            "冰": "#99CCFF",
            "岩": "#FFCC33"
        };
        return colors[element];
    }
    /* 元素颜色数据 结束*/
    // 根据元素名称获取对应的元素图片
    function getElementImage(element) {
        const foundElement = characters.find(e => e.element === element);
        return foundElement ? foundElement.elementImage : "";
    }
    // 根据角色名称获取对应的角色图片
    function getCharacterImage(role) {
        for (const element of characters) {
            const foundRole = element.role.find(r => r.name === role);
            if (foundRole) {
                return foundRole.image;
            }
        }
        return "";
    }
    /*原神角色列表 开始*/
    // 渲染角色数据表格
    function renderTable() {
        // 获取表格元素
        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; // 用于记录上一个元素，避免重复插入元素图标
        // 遍历角色数据
        characters.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"; // 根据星级设置颜色
                // 鼠标进入角色名称单元格时显示放大角色图标
                roleCell.addEventListener('mouseenter', function () {
                    const img = document.createElement('img');
                    img.src = getCharacterImage(character.name);
                    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`;
                    }
                    document.body.appendChild(img);
                });
                // 鼠标离开角色名称单元格时移除放大角色图标
                roleCell.addEventListener('mouseleave', function () {
                    const img = document.querySelector('img.zoom-image');
                    if (img) {
                        img.remove();
                    }
                });
                const addButtonCell = newRow.insertCell(); // 插入“拥有”按钮单元格
                const addButton = document.createElement('button'); // 创建按钮
                addButton.textContent = '没有'; // 设置按钮文本
                addButtonCell.appendChild(addButton); // 将按钮添加到单元格
                newRow.style.backgroundColor = getElementColor(elementData.element); // 根据元素设置行背景颜色
            });
        });
    }
    renderTable(); // 调用函数渲染表格
    /*原神角色列表 结束*/
</script>
</body>

</html>

 

与妖为邻
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
路由器刷breed+Web控制台助手v4.8版本.zip
03-18
Web控制台助手v4.8版本的特性可能包括： 1. **自动化登录**：自动填充用户名和密码，快速进入路由器Web界面，节省时间。 2. **多路由管理**：支持同时管理多个路由器，便于网络管理员批量操作。 3. **一键备份/...
Berkeley DB4.8以上各版本
01-09
压缩包子文件的文件名称列表虽然没有具体列出各个版本，但通常这些文件可能包含了不同版本的Berkeley DB，用于测试和比较它们在不同环境下的表现。在升级或选择数据库版本时，可以参考这些文件进行兼容性和性能测试...
路由器刷breed+Web控制台助手v4.8版本
10-22
在本文中，我们将详细探讨路由器刷breed以及Web控制台助手v4.8版本的相关知识点。 首先，让我们了解Breed。Breed是基于MicroPython的固件，设计用于路由器的备份和恢复。它提供了网页界面，用户可以通过浏览器进行...
Procomm Plus-V4.8版本
02-26
《Procomm Plus-V4.8版本：探索强大的串口调试工具》 在信息技术领域，调试是软件开发过程中不可或缺的一部分，特别是在通信协议的测试与优化中。Procomm Plus是一款经典的通讯软件，尤其在串行通信（RS232）调试...
实用日期控件MyDatePicker.js（4.8版本）+demo
01-09
config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js) calendar.js 日期库主文件,无需引入 My97DatePicker.htm 临时页面文件,不可删除(4.8以后不存在此文件) 目录lang 存放语言文件,你可以根据需要...
nodejs安装
a1241436267的博客
08-19 329
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 270
npm。
2024前端面试题-js篇
FormAda的博客
08-22 639
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 543
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 264
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 891
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1002
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 769
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 194
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 220
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 522
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
vue3 @antv/x6 使用画布滚动条以后的几个问题的解决
jwbabc的专栏
08-20 261
通过设置@antv/x6的插件scroller的options，来达到基本上满足项目的原型要求。
前端点击预览图片：Viewer.js 使用方法
mq1314520_zhl的博客
08-21 652
Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.
基于vue框架的班级网站的设计与实现vg66m（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-20 882
本研究旨在设计并实现一个基于Vue框架的班级网站，通过现代化的前端技术和用户体验设计，为班级成员提供一个便捷、高效、美观的在线交流空间。随着互联网技术的普及，越来越多的班级开始尝试建立自己的在线平台，以实现信息的快速传递和资源的有效共享。本系统采用前后端分离的开发模式，前端使用Vue.js框架构建用户界面，后端使用Node.js或Spring Boot等框架开发RESTful API，数据库采用MySQL或MongoDB等数据库进行数据存储和查询。每个步骤都需要仔细配置和测试，以确保系统的稳定性和高效性。
echarts4.8版本js
07-01
### 回答1： echarts是一款非常强大的数据可视化库，可以通过使用 JavaScript 创建各种图表和图形。而echarts4.8版本就是该库的更新版本。 echarts4.8版本相比之前的版本，引入了一些新的功能和改进，提供了更好的用户体验和更丰富的可视化效果。 首先，echarts4.8版本增加了更多的图表类型，如柱状图、折线图、饼图、散点图、雷达图等，不仅可以满足基本的数据可视化需求，还可以根据具体的业务场景，选择最合适的图表类型。 其次，echarts4.8版本提供了更多的图表配置项和交互能力，可以通过自定义设置不同的样式、颜色、数据标签来使得图表更加美观和易于阅读。同时，还可以通过悬浮提示框、数据区域选择等功能，增加用户与图表的交互性，提供更好的数据分析和数据呈现效果。 而且，echarts4.8版本还支持动态数据的更新和异步加载，可以通过监听事件或定时器来更新数据，并且可以使用扩展组件来实现更复杂的功能，如图表中的动画效果、图表之间的联动等。 此外，echarts4.8版本还支持响应式布局，图表可以根据不同的设备和屏幕尺寸自动调整大小和布局，确保在不同的终端上都有良好的显示效果。 总之，echarts4.8版本作为一款强大的数据可视化库，可以帮助用户快速、简单地创建各种图表和图形。无论是数据分析、数据呈现还是业务报告，都能满足各种需求。 ### 回答2： echarts是一个由百度开发的数据可视化库，用于创建各种交互式图表和地图。echarts 4.8版本是最新的稳定版本，具有许多强大的功能和改进。 echarts 4.8版本引入了大量的新功能和优化。首先，它支持更多类型的图表，包括线图、柱状图、饼图、散点图、雷达图等。这些图表类型可以根据数据的不同类型和需求进行选择和定制。 其次，echarts 4.8版本提供了更多的数据处理和操作功能。例如，它可以处理大规模数据集，并支持数据的过滤、排序和聚合。此外，它还支持数据的动态更新和异步加载，使用户可以在数据变化时实时更新图表。 此外，echarts 4.8版本具有更强大的交互功能。用户可以通过缩放、拖拽、选择等方式与图表进行交互，以查看和分析数据。此外，用户还可以使用工具箱来进行更多的数据操作和操作，如数据视图、数据区域选择、导出数据等。 最后，echarts 4.8版本还改进了图表的美观性和可用性。它提供了更多的主题和样式选择，用户可以根据自己的喜好和需求来设置图表的外观。此外，它还支持响应式布局，适应不同大小的屏幕和设备。 总的来说，echarts 4.8版本是一个功能强大、易于使用的数据可视化库，可以帮助用户创建漂亮且交互式的图表和地图。无论是数据分析、数据展示还是数据挖掘，echarts都能满足用户的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值