原神4.8版本角色数据

最新推荐文章于 2024-09-13 08:33:26 发布
与妖为邻
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量242
点赞数 1
文章标签： javascript 前端 css 原神角色数据
本文链接：https://blog.csdn.net/lulei5153/article/details/141023437
版权
<!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>
    <style>
        body {
            background: #0b1b2c;
        }

        /* .element-container {
          margin-bottom: 5px;
      } */
        .element-title {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .element-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        .character-list {
            display: flex;
            flex-wrap: wrap;
            background: #1d775f7b;
            border-radius: 5px;
        }

        .character-item {
            margin: 10px;
            text-align: center;
            text-shadow: 1px 1px 1px #030303;
        }

        .character-image {
            width: 50px;
            height: 50px;
            border-radius: 5px;

            &:hover {
                width: 250px;
                height: 250px;
                transition: 0.5s ease;
                position: absolute;
            }
        }

        .character-name {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div id="characters-container"></div>
    <a href="https://genshin-builds.com/cn/characters" target="_blank">数据来源：(genshin-builds.com)</a>
    <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角色数据 结束*/
        // 渲染角色数据到页面
        const container = document.getElementById('characters-container');
        characters.forEach(element => {
            const elementContainer = document.createElement('div');
            elementContainer.className = 'element-container';
            const elementTitle = document.createElement('div');
            elementTitle.className = 'element-title';
            const elementIcon = document.createElement('img');
            elementIcon.className = 'element-icon';
            elementIcon.src = element.elementImage;
            elementTitle.appendChild(elementIcon);
            elementTitle.append(element.element);
            elementTitle.style.color = getElementColor(element.element); // 设置元素标题颜色
            elementContainer.appendChild(elementTitle);
            const characterList = document.createElement('div');
            characterList.className = 'character-list';
            element.role.forEach(character => {
                const characterItem = document.createElement('div');
                characterItem.className = 'character-item';
                const characterImage = document.createElement('img');
                characterImage.className = 'character-image';
                characterImage.src = character.image;
                // 设置角色图像背景颜色
                if (character.star === "5") {
                    characterImage.style.backgroundColor = "#ac7647";
                } else if (character.star === "4") {
                    characterImage.style.backgroundColor = "#846baa";
                }
                characterItem.appendChild(characterImage);
                const characterName = document.createElement('div');
                characterName.className = 'character-name';
                characterName.textContent = character.name;
                characterName.style.color = getElementColor(element.element); // 设置角色名字颜色
                characterItem.appendChild(characterName);
                characterList.appendChild(characterItem);
            });
            elementContainer.appendChild(characterList);
            container.appendChild(elementContainer);
        });
        function getElementColor(element) {
            switch (element) {
                case "火": return "#FF9933"; // 火元素颜色
                case "水": return "#3399FF"; // 水元素颜色
                case "风": return "#66c6ac"; // 风元素颜色
                case "雷": return "#CC66FF"; // 雷元素颜色
                case "草": return "#66CC66"; // 草元素颜色
                case "冰": return "#99CCFF"; // 冰元素颜色
                case "岩": return "#FFCC33"; // 岩元素颜色
            }
        }
    </script>
</body>

</html>