<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原神角色数据列表</title>
<link rel="stylesheet" href="file:///D:/data/原神/css/GenshinRoleTableContainer.css">
</head>
<style>
body {
background: #0b1b2c;
}
/* 原神角色列表样式 */
#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;
}
}
/* 3个列表 1个按钮*/
#GenshinRoleTable,
#cultivateGenshinRole,
#haveGenshinRole,
#genshinRoleStrategy {
margin-top: 35px;
}
/* 按钮√ */
.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;
}
.checkButton::before {
content: '获得';
display: block;
transform: rotate(90deg) translate(-14px, 12px);
color: #67c23a;
text-shadow: 1px 1px 1px #030303;
}
.cultivate::before {
content: '培养';
display: block;
transform: rotate(90deg) translate(-14px, 12px);
color: #ffcc00;
text-shadow: 1px 1px 1px #030303;
}
/* 数据和品质切换按钮样式 */
#switchButton,
#sortButton {
cursor: pointer;
}
/* 鼠标移入显示图片添加过渡效果 */
.zoom-image {
transition: transform 0.3s ease-in-out;
}
}
/* 原神角色列表样式 结束*/
</style>
<body>
<!-- 原神角色列表GenshinRoleTableContainer -->
<div id="GenshinRoleTableContainer">原神角色列表GenshinRoleTableContainer</div>
</body>
<!-- 原神角色列表数据genshin4_8_data
<script src="file:///D:/data/原神/js/genshin4_8_data.js"></script> -->
<!-- 原神角色列表功能GenshinRoleTableContainer
<script src="file:///D:/data/原神/js/GenshinRoleTableContainer.js"></script>-->
<script>
/*134角色培养数据*/
const cultivateGenshinRole134 = [
"宵宫", "夜兰", "班尼特", "钟离",
"雷电将军", "枫原万叶", "行秋", "瑶瑶",
"七七", "纳西妲","九条裟罗", "迪奥娜","芙宁娜", // 添加新角色
];
/*152角色培养数据*/
const cultivateGenshinRole152 = [
"夜兰", "班尼特", "钟离",
"雷电将军", "枫原万叶", "行秋", "瑶瑶","夏洛蒂","香菱",
// 添加新角色
];
/*培养数据* 结束*/
/* 134获得角色数据*/
const haveGenshinRole134 = [
{
element: "火", // 元素类型
role: [
{ name: "迪卢克", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "宵宫", level: 90, constellation: 1, talent: "满", 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/7/12", note: "备注" },
{ name: "班尼特", level: 90, constellation: 5, talent: "满", 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: "7/10/8", note: "备注" },
{ name: "夜兰", level: 90, constellation: 2, talent: "满", note: "备注" },
{ name: "芙宁娜", level: 90, constellation: 1, talent: "9/10/10", 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: "6/11/12", 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: "满", 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: "满", 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/11/12", 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: "6/12/10", 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: "9/10/9", 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/12/9", 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: "9/10/10", 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获得角色数据 结束*/
/* 152获得角色数据*/
const haveGenshinRole152 = [
{
element: "火", // 元素类型
role: [
// { name: "迪卢克", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "宵宫", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "迪希雅", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "托马", level: 20, constellation: 2, talent: "1/1/1", note: "备注" },
{ name: "烟绯", level: 7, constellation: 5, talent: "1/1/1", note: "备注" },
{ name: "香菱", level: 90, constellation: 6, talent: "2/7/11", note: "备注" },
{ name: "班尼特", level: 90, constellation: 5, talent: "1/1/1", note: "备注" },
{ name: "安柏", level: 31, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "辛焱", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "嘉明", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "夏沃蕾", level: 40, constellation: 4, 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: 90, constellation: 1, talent: "1/1/1", note: "备注" },
{ name: "芙宁娜", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "那维莱特", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "芭芭拉", level: 90, constellation: 3, talent: "1/1/1", note: "备注" },
{ name: "行秋", level: 20, constellation: 4, talent: "1/1/1", note: "备注" },
// { name: "坎蒂丝", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
]
},
{
element: "风", // 元素类型
role: [
{ name: "琴", level: 70, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "枫原万叶", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "流浪者", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
{ name: "珐露珊", level: 90, constellation: 2, talent: "1/1/1", note: "备注" },
// { name: "砂糖", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "鹿野院平藏", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },90
{ name: "琳妮特", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },
{ name: "早柚", level: 40, constellation: 3, talent: "1/1/1", note: "备注" },
]
},
{
element: "雷", // 元素类型
role: [
{ name: "刻晴", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "雷电将军", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "菲谢尔", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "北斗", level: 90, constellation: 6, talent: "1/1/1", note: "备注" },
{ name: "丽莎", level: 36, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "雷泽", level: 20, constellation: 2, talent: "1/1/1", note: "备注" },
// { name: "赛索斯", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "多莉", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "久岐忍", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "九条裟罗", level: 40, constellation: 6, talent: "1/1/1", note: "备注" },
]
},
{
element: "草", // 元素类型
role: [
// { name: "纳西妲", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "提纳里", level: 39, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "绮良良", level: 40, constellation: 2, talent: "1/1/1", note: "备注" },
{ name: "卡维", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "瑶瑶", level: 90, constellation: 1, talent: "1/1/1", note: "备注" },
{ name: "柯莱", level: 70, constellation: 2, talent: "1/1/1", note: "备注" },
{ name: "旅行者 (草)", level: 90, constellation: 6, talent: "1/1/1", note: "备注" }
]
},
{
element: "冰", // 元素类型
role: [
// { name: "七七", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
// { name: "优菈", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "菲米尼", level: 40, constellation: 5, talent: "1/1/1", note: "备注" },
{ name: "米卡", level: 60, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "莱依拉", level: 70, constellation: 2, talent: "1/1/1", note: "备注" },
{ name: "罗莎莉亚", level: 49, constellation: 1, talent: "1/1/1", note: "备注" },
// { name: "迪奥娜", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "重云", level: 1, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "凯亚", level: 60, constellation: 1, talent: "1/1/1", note: "备注" },
{ name: "夏洛蒂", level: 60, constellation: 6, talent: "1/1/1", note: "备注" },
]
},
{
element: "岩", // 元素类型
role: [
{ name: "钟离", level: 90, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "云堇", level: 20, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "五郎", level: 1, constellation: 1, talent: "1/1/1", note: "备注" },
{ name: "凝光", level: 40, constellation: 0, talent: "1/1/1", note: "备注" },
{ name: "诺艾尔", level: 34, constellation: 4, talent: "1/1/1", note: "备注" },
]
}
];
/* 152获得角色数据 结束*/
/* 原神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&quality=100&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&quality=100&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&quality=100&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&quality=100&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 elementColors = {
"火": "#FF9933",
"水": "#3399FF",
"风": "#66c6ac",
"雷": "#CC66FF",
"草": "#66CC66",
"冰": "#99CCFF",
"岩": "#FFCC33"
};
/* 原神元素颜色 结束*/
document.getElementById('GenshinRoleTableContainer').innerHTML = `
<!-- 修改数据器 -->
<div id="addReadFolderArea"></div>
<div>
<!-- 原神版本全部角色列表 -->
<table id="GenshinRoleTable"></table>
</div>
<div>
<!-- 已有角色列表 -->
<table id="haveGenshinRole"></table>
</div>
<div>
<!-- 培养角色列表 -->
<table id="cultivateGenshinRole"></table>
</div>
<div>
</div>
`;
/**
* 获取元素的颜色
*
* @param element 元素名称
* @returns 返回对应元素的颜色
*/
function getElementColor(element) {
return elementColors[element];
}
/**
* 获取元素对应的图片
*
* @param element 元素
* @returns 返回元素对应的图片，若未找到则返回空字符串
*/
function getElementImage(element) {
const foundElement = GenshinRole.find(e => e.element === element); // 使用 GenshinRole 数组
return foundElement ? foundElement.elementImage : "";
}
/**
* 获取角色图片
*
* @param role 角色名称
* @returns 返回对应角色的图片地址，若未找到则返回空字符串
*/
function getCharacterImage(role) {
for (const element of GenshinRole) { // 使用 GenshinRole 数组
const foundRole = element.role.find(r => r.name === role);
if (foundRole) {
return foundRole.image;
}
}
return "";
}
let isSorted = false;
let currentHaveGenshinRoleData = haveGenshinRole134;
let currentCultivateGenshinRoleData = cultivateGenshinRole134;
// 初始化表格的函数
/**
* 初始化表格
*
* @param table 表格DOM对象
* @param captionText 表格标题文本
* @param isAddButton 是否添加按钮，默认为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);
});
// 添加切换数据按钮
const switchButton = document.createElement('button');
switchButton.id = 'switchButton';
switchButton.innerHTML = '切换数据';
table.querySelector('caption b').insertAdjacentElement('afterend', switchButton);
switchButton.addEventListener('click', () => {
currentHaveGenshinRoleData = currentHaveGenshinRoleData === haveGenshinRole134 ? haveGenshinRole152 : haveGenshinRole134;
currentCultivateGenshinRoleData = currentCultivateGenshinRoleData === cultivateGenshinRole134 ? cultivateGenshinRole152 : cultivateGenshinRole134;
renderTable();
GenshinRoleTable(); // 重新渲染GenshinRoleTable
});
}
// 隐藏“备注”列
if (captionText === "134获得角色数据" || captionText === "152获得角色数据") {
table.querySelectorAll('th').forEach((th, index) => {
if (index === 6) th.style.display = 'none';
});
}
// 在“重点培养的角色”后面添加按钮
if (captionText === "134重点培养的角色" || captionText === "152重点培养的角色") {
const readFolderButton = document.createElement('button');
readFolderButton.type = 'button';
readFolderButton.id = 'readFolder';
readFolderButton.innerHTML = '修改数据器';
readFolderButton.onclick = () => addReadFolder.show();
table.querySelector('caption b').insertAdjacentElement('afterend', readFolderButton);
}
table.querySelectorAll('.hidden-star').forEach(th => th.style.display = 'none');
}
/**
* 渲染表格
*/
function renderTable() {
const haveGenshinRoleTable = document.getElementById("haveGenshinRole");
initializeTable(haveGenshinRoleTable, currentHaveGenshinRoleData === haveGenshinRole134 ? "134获得角色数据" : "152获得角色数据", true);
let row = 1;
currentHaveGenshinRoleData.forEach((elementData) => { // 使用 currentHaveGenshinRoleData 数组
elementData.role.forEach((character) => {
addCharacterRow(haveGenshinRoleTable, character, elementData.element, row++);
});
});
// 隐藏“备注”列的 td 元素
if (haveGenshinRoleTable.querySelector('caption b').innerText === "134获得角色数据" || haveGenshinRoleTable.querySelector('caption b').innerText === "152获得角色数据" ) {
haveGenshinRoleTable.querySelectorAll('td:nth-child(7)').forEach(td => td.style.display = 'none');
}
const cultivateGenshinRoleTable = document.getElementById("cultivateGenshinRole");
initializeTable(cultivateGenshinRoleTable, currentCultivateGenshinRoleData === cultivateGenshinRole134 ? "134重点培养的角色" : "152重点培养的角色", false);
row = 1;
currentCultivateGenshinRoleData.forEach((characterName) => {
const elementData = currentHaveGenshinRoleData.find(e => e.role.some(r => r.name === characterName));
if (elementData) {
const fullCharacterData = elementData.role.find(r => r.name === characterName);
addCharacterRow(cultivateGenshinRoleTable, fullCharacterData, elementData.element, row++);
}
});
}
/**
* 添加角色行
*
* @param table HTMLTableElement 表格对象
* @param character Object 角色对象
* @param element string 元素类型
* @param rowNumber number 行号
* @returns void
*/
function addCharacterRow(table, character, element, rowNumber) {
const newRow = table.insertRow();
newRow.insertCell().textContent = rowNumber;
const roleCell = newRow.insertCell();
roleCell.textContent = character.name;
const isCultivateRole = currentCultivateGenshinRoleData.includes(character.name); // 使用 currentCultivateGenshinRoleData 数组
if (isCultivateRole && table.id === "haveGenshinRole") {
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);
}
/**
* 根据角色名和元素获取角色的星级
*
* @param roleName 角色名
* @param element 元素
* @returns 返回角色的星级，若未找到则返回空字符串
*/
function getStar(roleName, element) {
const elementData = GenshinRole.find(e => e.element === element); // 使用 GenshinRole 数组
if (elementData) {
const role = elementData.role.find(r => r.name === roleName);
return role ? role.star : "";
}
return "";
}
// 重新渲染GenshinRoleTable的函数
/**
* 生成原神角色数据表格
*/
function GenshinRoleTable() {
const GenshinRoleTable = document.getElementById("GenshinRoleTable");
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) => { // 使用 GenshinRole 数组
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;
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();
const isInHaveGenshinRole = currentHaveGenshinRoleData.some(e => e.role.some(r => r.name === character.name)); // 使用 currentHaveGenshinRoleData 数组
if (!isInHaveGenshinRole) {
const addButton1 = document.createElement('button');
addButton1.textContent = '没有';
addButtonCell.appendChild(addButton1);
} else {
const addButton2 = document.createElement('button');
addButton2.textContent = '';
addButton2.className = 'checkButton';
addButtonCell.appendChild(addButton2);
}
newRow.style.backgroundColor = getElementColor(elementData.element);
});
});
}
// 初始调用
GenshinRoleTable();
renderTable();
/**
* 对表格进行排序和设置背景颜色
*
* @param table 要排序的表格
* @param isSorted 是否已经排序，默认为false
* @returns 无返回值
*/
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; // 如果第一行的星级是5且第二行的星级不是5，第一行排在前面
} else if (starA !== "5" && starB === "5") {
return 1; // 如果第一行的星级不是5且第二行的星级是5，第二行排在前面
} 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 (isSorted) {
if (star === "5" || constellation === 6) {
// 如果星级是5或者星座值是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 {
// 否则，调用 getElementColor 函数设置背景颜色
const element = row.cells[1].textContent; // 假设元素信息存储在角色名称单元格中
row.cells[1].style.backgroundColor = getElementColor(element);
row.cells[3].style.backgroundColor = getElementColor(element);
row.cells[4].style.backgroundColor = getElementColor(element);
row.cells[5].style.backgroundColor = getElementColor(element);
}
} else {
// 恢复到 elementColors 对象中对应 element 键的值
const element = row.cells[1].textContent; // 假设元素信息存储在角色名称单元格中
row.cells[1].style.backgroundColor = elementColors[element] || ''; // 使用 elementColors 对象中的颜色
row.cells[3].style.backgroundColor = elementColors[element] || '';
row.cells[4].style.backgroundColor = elementColors[element] || '';
row.cells[5].style.backgroundColor = elementColors[element] || '';
}
// 打印最后设置的背景颜色
// console.log(`Row background color for cells 1, 3, 4, 5: ${row.cells[1].style.backgroundColor}`);
});
}
/**
* 显示放大的图片
*
* @param roleName 角色名称
* @param event 事件对象
*/
function showZoomImage(roleName, event) {
const img = createZoomImage(roleName, event);
document.body.appendChild(img);
}
/**
* 创建一个放大的图片元素
*
* @param roleName 角色名称
* @param event 触发事件
* @returns 返回创建的 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;
}
/**
* 隐藏放大图片
*
* @returns 无返回值
*/
function hideZoomImage() {
const img = document.querySelector('img.zoom-image');
if (img) {
img.remove();
}
}
renderTable();
/* 获得角色数据列表 结束*/
</script>
</html>
