<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原神角色数据列表</title>
<!-- 修改数据器引入 highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<!-- <link rel="stylesheet" href="file:///D:/data/原神/css/staticHeader.css"> -->
<!-- <link rel="stylesheet" href="file:///D:/data/原神/css/uniqueCountdownContainer.css"> -->
<!-- <link rel="stylesheet" href="file:///D:/data/原神/css/GenshinRoleTableContainer.css"> -->
</head>
<style>
body {
background: #0b1b2c;
}
/* 头部样式 */
header {
margin: -8px;
padding: 0;
width: 99vw;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #cbcbcb;
position: fixed;
/* logo */
figure.logo {
width: 262px;
height: 50px;
/* 缩小 */
transform: scale(0.8);
margin-top: 15px;
margin-left: -15px;
border-radius: 50%;
background: #f30303;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
z-index: 99;
figcaption {
background: hsl(0, 0%, 0%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
letter-spacing: -3px;
line-height: 45px;
border-radius: 50%;
font-size: 40px;
width: 152px;
}
.my_name1 {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
transform: translate(35%, 0%);
-webkit-text-stroke: #fffbfb 1px;
}
.my_name2 {
text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translate(35%, -93%);
-webkit-text-stroke: #ffffff 1px;
}
img {
width: 60px;
height: 35px;
border-radius: 50%;
transition: transform 0.3s ease;
position: absolute;
&:hover {
transform: scale(1.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
.kong {
margin-top: 7px;
margin-left: 200px;
}
.ying {
top: 7px;
margin-left: 2px;
}
}
/* 时间 */
time {
background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 1rem;
}
}
/* 全屏还原关闭按钮 */
menu {
display: flex;
button {
background: none;
border: none;
}
img {
width: 35px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
&:hover {
transform: scale(1.2);
padding: 5px;
background: #ffd000;
}
}
button:nth-child(2) {
display: none;
/* 放大镜效果 */
transform: scale(1.16);
}
}
}
/* 头部样式 结束 */
/* 独特的倒计时容器uniqueCountdownContainer 开始 */
#uniqueCountdownContainer {
top: 42px;
right: 0;
width: 20%;
border-radius: 5px;
position: fixed;
display: flex;
flex-direction: column;
/* 默认的倒计时DefaultCountdown */
#DefaultCountdown {
user-select: none;
div:first-child {
border-radius: 5px 5px 0 0;
}
div:nth-child(5) {
border-radius: 0 0 5px 5px;
}
}
/* 添加倒计时区域 */
.uniqueCountdowns-Button {
display: flex;
flex-direction: row-reverse;
menu {
display: flex;
margin: 0;
padding: 0;
}
}
input[type="checkbox"] {
display: none;
}
label {
&:hover {
background-color: #e63c3c;
cursor: pointer;
strong {
color: #ffffff;
text-shadow: 2px 2px 2px #000000;
}
span {
color: #000000;
text-shadow: 1px 1px 1px #fffefe;
font-size: 1.8rem;
}
}
}
strong {
text-shadow: 2px 2px 2px #ffffff;
}
span {
color: #fff;
text-shadow: 1px 1px 1px #000;
font-size: 1.8rem;
}
}
/* 添加按钮样式 */
.uniqueAddButton {
/* 竖排文字，从左到右 */
writing-mode: vertical-lr;
/* 文字直立 */
text-orientation: upright;
letter-spacing: 15px;
font-size: 18px;
}
/* 添加的弹窗窗口样式 */
#uniqueAddCountdownDialog {
transform: translate(100%, 0%);
border-radius: 5px;
color: #67c23a;
text-shadow: 1px 1px 1px #000;
background: rgba(255, 255, 255, 0.2);
/* 半透明背景 */
backdrop-filter: blur(10px);
/* 模糊效果 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* 阴影效果 */
border: none;
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.2rem;
ul {
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
b {
color: #000000;
text-shadow: 1px 1px 1px #f2f1f1;
}
}
}
}
/* 完成按钮 */
.finishButton {
display: none;
}
/* 完成后的样式 */
.FinishTask {
/* 删除线 */
text-decoration: line-through;
text-decoration-color: #ffea01f6;
text-decoration-thickness: 3px;
}
/* 独特的倒计时容器uniqueCountdownContainer 结束 */
/* 原神角色列表样式 */
#GenshinRoleTableContainer {
display: flex;
table {
border-collapse: collapse;
margin-top: 35px;
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;
}
}
/* 按钮√ */
.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;
}
}
/* 原神角色列表样式 结束*/
/* 修改数据器按钮 */
#readFolder {
color: #67c23a;
text-shadow: 1px 1px 1px #070707;
cursor: pointer;
}
/* 修改数据器样式 开始*/
#addReadFolderArea {
margin-left: 10px;
z-index: 9999;
#addReadFolder {
display: flex;
/* 保存按钮 */
#fileSave {
color: #e6a23c;
}
/* 关闭按钮 */
.cancel-button {
color: #f56c6c;
}
}
/* 修改内容区 */
#fileContent {
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 5px;
height: 865px;
overflow: auto;
/* 添加此行 */
}
}
/* 修改数据器样式 结束*/
/* 底部footer样式 */
footer {
background-color: #cbcbcb;
width: 100vw;
height: 20px;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
user-select: text;
a {
color: #d6d301;
text-shadow: 1px 1px 1px #100000;
font-weight: bold;
cursor: pointer;
}
}
/* 底部footer样式 结束 */
</style>
<body>
<!-- staticHeader(静态标头) -->
<header id="staticHeader">staticHeader(静态标头)</header>
<!-- 独特的倒计时容器uniqueCountdownContainer -->
<div id="uniqueCountdownContainer">独特的倒计时容器uniqueCountdownContainer</div>
<!-- 原神角色列表GenshinRoleTableContainer -->
<div id="GenshinRoleTableContainer">
<!-- 修改数据器修改内容区域 -->
<dialog id="addReadFolderArea"></dialog>
<div>
<!-- 原神版本角色数据列表 -->
<table id="GenshinRoleTable"> </table>
</div>
<div>
<!-- 已有角色列表 -->
<table id="haveGenshinRole"> </table>
</div>
<div>
<!-- 重点培养角色列表 -->
<table id="cultivateGenshinRole"> </table>
</div>
</div>
<!-- 页脚 -->
<footer>
更新时间：
<script>document.write('2024/9/02 20:00:00');</script>
</span>
<a href="https://blog.csdn.net/lulei5153" target="_blank">作者：与妖为邻</a>
刷新时间：
<script>
document.write((d = new Date(), `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)} 星期${'日一二三四五六'[d.getDay()]} ${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(-2)}`));
</script>
</script>
</footer>
<!-- 页脚 结束-->
</body>
<!-- staticHeader(静态标头) -->
<!-- <script src="file:///D:/data/原神/js/staticHeader.js"></script> -->
<!-- 独特的倒计时容器uniqueCountdownContainer -->
<!-- <script src="file:///D:/data/原神/js/uniqueCountdownContainer.js"></script> -->
<!-- 原神角色列表数据genshin4_8_data -->
<!-- <script src="file:///D:/data/原神/js/genshin5_0_data.js"></script> -->
<!-- 原神角色列表功能GenshinRoleTableContainer -->
<!-- <script src="file:///D:/data/原神/js/GenshinRoleTableContainer.js"></script> -->
<!-- 修改数据器addReadFolderArea -->
<!-- <script src="file:///D:/data/原神/js/addReadFolderArea.js"></script> -->
<script>
// 数组数据
/*134角色培养数据.4个角色配对排序*/
const cultivateGenshinRole134 = [
"钟离", "班尼特", "夜兰", "宵宫",
"雷电将军", "枫原万叶", "行秋", "瑶瑶",
"纳西妲", "久岐忍", "班尼特", "枫原万叶",
"流浪者", "流浪者",
];
/*152角色培养数据4个角色配对排序*/
const cultivateGenshinRole152 = [
"钟离", "班尼特", "夜兰", "流浪者",
"雷电将军", "枫原万叶", "行秋", "瑶瑶", "夏洛蒂", "香菱",
// 添加新角色
];
/*培养数据* 结束*/
/* 原神攻略收藏*/
const introductionLinks = [
{
name: '原神wiki角色攻略',
url: 'https://bbs.mihoyo.com/ys/strategy/channel/map/37/39?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG'
},
{
name: '提瓦特大地图',
url: 'https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,508,2¢er=2008.50,-1084.00&zoom=-3.00'
},
{
name: '原神wiki武器攻略',
url: 'https://bbs.mihoyo.com/ys/strategy/channel/map/37/38?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG'
},
{
name: '原神wiki活动攻略',
url: 'https://bbs.mihoyo.com/ys/strategy/channel/map/37/40?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG'
},
{
name: '夏洛蒂培养攻略',
url: 'https://www.miyoushe.com/ys/article/45239036'
},
{
name: '夏洛蒂机养成',
url: 'https://www.miyoushe.com/ys/article/45238643'
},
{
name: '瑶瑶培养攻略',
url: 'https://www.miyoushe.com/ys/article/34411972'
},
{
name: '久岐忍培养图鉴',
url: 'https://www.miyoushe.com/ys/article/24456852'
},
];
/* 原神攻略收藏 结束*/
/* 134获得角色数据*/
const haveGenshinRole134 = [
{
element: "火", // 元素类型
role: [
{ name: "迪卢克", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "宵宫", level: 90, constellation: 1, talent: "满", Strategy: "攻略" },
{ name: "迪希雅", level: 90, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "托马", level: 20, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "烟绯", level: 80, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "香菱", level: 90, constellation: 3, talent: "1/7/12", Strategy: "攻略" },
{ name: "班尼特", level: 90, constellation: 5, talent: "满", Strategy: "攻略" },
{ name: "安柏", level: 40, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "辛焱", level: 1, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "嘉明", level: 20, constellation: 4, talent: "1/1/1", Strategy: "攻略" },
{ name: "夏沃蕾", level: 80, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "夏沃蕾", level: 0, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "水", // 元素类型
role: [
{ name: "珊瑚宫心海", level: 90, constellation: 0, talent: "7/10/8", Strategy: "攻略" },
{ name: "夜兰", level: 90, constellation: 2, talent: "10/10/10", Strategy: "攻略" },
{ name: "芙宁娜", level: 90, constellation: 1, talent: "9/10/10", Strategy: "攻略" },
// { name: "那维莱特", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "芭芭拉", level: 60, constellation: 3, talent: "1/1/1", Strategy: "攻略" },
{ name: "行秋", level: 90, constellation: 6, talent: "6/11/12", Strategy: "攻略" },
{ name: "坎蒂丝", level: 19, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "风", // 元素类型
role: [
{ name: "琴", level: 60, constellation: 3, talent: "1/1/4", Strategy: "攻略" },
{ name: "枫原万叶", level: 90, constellation: 1, talent: "满", Strategy: "攻略" },
{ name: "流浪者", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "珐露珊", level: 90, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "砂糖", level: 90, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "鹿野院平藏", level: 20, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "琳妮特", level: 20, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "早柚", level: 80, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "雷", // 元素类型
role: [
{ name: "刻晴", level: 90, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "雷电将军", level: 90, constellation: 3, talent: "满", Strategy: "攻略" },
{ name: "菲谢尔", level: 90, constellation: 3, talent: "1/1/1", Strategy: "攻略" },
{ name: "北斗", level: 20, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "丽莎", level: 60, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "雷泽", level: 50, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
// { name: "赛索斯", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "多莉", level: 20, constellation: 4, talent: "1/1/1", Strategy: "攻略" },
{ name: "久岐忍", level: 90, constellation: 4, talent: "1/13/9", Strategy: "元素战技,精通" },
{ name: "九条裟罗", level: 90, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "草", // 元素类型
role: [
{ name: "纳西妲", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "提纳里", level: 70, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
{ name: "绮良良", level: 40, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "卡维", level: 20, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "瑶瑶", level: 90, constellation: 6, talent: "6/12/10", Strategy: "攻略" },
{ name: "柯莱", level: 20, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
// { name: "旅行者 (草)", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" }
]
},
{
element: "冰", // 元素类型
role: [
{ name: "七七", level: 90, constellation: 3, talent: "9/10/12", Strategy: "攻略" },
// { name: "优菈", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "菲米尼", level: 20, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "米卡", level: 20, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "莱依拉", level: 40, constellation: 4, talent: "1/4/1", Strategy: "攻略" },
{ name: "罗莎莉亚", level: 20, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "迪奥娜", level: 90, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "重云", level: 20, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "凯亚", level: 60, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "夏洛蒂", level: 50, constellation: 4, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "岩", // 元素类型
role: [
{ name: "钟离", level: 90, constellation: 0, talent: "9/10/10", Strategy: "攻略" },
{ name: "云堇", level: 40, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "五郎", level: 20, constellation: 3, talent: "1/1/1", Strategy: "攻略" },
{ name: "凝光", level: 70, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "诺艾尔", level: 80, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "旅行者 (岩)", level: 80, constellation: 6, talent: "1/1/1", Strategy: "攻略" }
]
}
];
/* 134获得角色数据 结束*/
/* 152获得角色数据*/
const haveGenshinRole152 = [
{
element: "火", // 元素类型152
role: [
// { name: "迪卢克", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "宵宫", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "迪希雅", level: 20, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "托马", level: 20, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
{ name: "烟绯", level: 7, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "香菱", level: 90, constellation: 6, talent: "2/7/11", Strategy: "攻略" },
{ name: "班尼特", level: 90, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "安柏", level: 31, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "辛焱", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "嘉明", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "夏沃蕾", level: 40, constellation: 4, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "水", // 元素类型152
role: [
{ name: "莫娜", level: 90, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
// { name: "珊瑚宫心海", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "夜兰", level: 90, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "芙宁娜", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "那维莱特", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "芭芭拉", level: 90, constellation: 3, talent: "1/1/1", Strategy: "攻略" },
{ name: "行秋", level: 20, constellation: 4, talent: "1/1/1", Strategy: "攻略" },
// { name: "坎蒂丝", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "风", // 元素类型152
role: [
{ name: "琴", level: 70, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "枫原万叶", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "流浪者", level: 90, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "珐露珊", level: 90, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
// { name: "砂糖", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "鹿野院平藏", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },90
{ name: "琳妮特", level: 90, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "早柚", level: 40, constellation: 3, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "雷", // 元素类型152
role: [
{ name: "刻晴", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "雷电将军", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "菲谢尔", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "北斗", level: 90, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
{ name: "丽莎", level: 36, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "雷泽", level: 20, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
// { name: "赛索斯", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "多莉", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "久岐忍", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "九条裟罗", level: 40, constellation: 6, talent: "1/1/1", Strategy: "攻略" },
]
},
{
element: "草", // 元素类型152
role: [
// { name: "纳西妲", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "提纳里", level: 39, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "绮良良", level: 40, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
{ name: "卡维", level: 20, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "瑶瑶", level: 90, constellation: 2, talent: "4/10/9", Strategy: "攻略" },
{ name: "柯莱", level: 70, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
{ name: "旅行者 (草)", level: 90, constellation: 6, talent: "1/1/1", Strategy: "攻略" }
]
},
{
element: "冰", // 元素类型152
role: [
// { name: "七七", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
// { name: "优菈", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "菲米尼", level: 40, constellation: 5, talent: "1/1/1", Strategy: "攻略" },
{ name: "米卡", level: 60, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "莱依拉", level: 70, constellation: 2, talent: "1/1/1", Strategy: "攻略" },
{ name: "罗莎莉亚", level: 49, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
// { name: "迪奥娜", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "重云", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "凯亚", level: 60, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "夏洛蒂", level: 60, constellation: 6, talent: "1/10/11", Strategy: "夏洛蒂主要定位是攻击治疗续航辅助，其被动在与其他枫丹角色组成配队时会获得额外治疗加成收益。但和非枫丹角色搭配会获得冰伤加成，可以考虑在一定程度上开发输出但主流仍为奶妈。" },
]
},
{
element: "岩", // 元素类型
role: [
{ name: "钟离", level: 90, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "云堇", level: 20, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "五郎", level: 1, constellation: 1, talent: "1/1/1", Strategy: "攻略" },
{ name: "凝光", level: 40, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
{ name: "诺艾尔", level: 34, constellation: 4, talent: "1/1/1", Strategy: "攻略" },
{ name: "卡齐娜", level: 1, constellation: 0, talent: "1/1/1", Strategy: "攻略" },
]
}
];
/* 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: "5", name: "玛拉妮", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mualani/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: "5", name: "基尼奇", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kinich/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: "4", name: "卡齐娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kachina/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",
"安全": "#67c23a",
"警告": "#e6a23c",
"危险": "#f56c6c",
"消息": "#909399"
};
/**头部staticHeader 开始 */
/**
* HTML初始结构
*
* @returns 无返回值
*/
document.getElementById('staticHeader').innerHTML = `
<header class="dynamicHeader">
<figure class="logo">
<a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
<img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
</a>
<figcaption class="my_name1">与妖为邻</figcaption>
<figcaption class="my_name2">与妖为邻</figcaption>
<a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" title="首页" target="_blank">
<img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
</a>
</figure>
<button type="button" id="readFolder" onclick="addReadFolder.show()">修改数据器</button>
<button id="globalSwitchButton">切换数据总览</button>
<time datetime="2024-07-10" title="2024-07-10" class="dateTime" id="dateTime">2024-07-10</time>
<iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&id=99"></iframe>
<menu>
<button class="fullScreen" type="button">
<img src="file:///D:/img/全屏.svg" alt="全屏">
</button>
<button class="exitFullScreen" type="button">
<img src="file:///D:/img/还原.svg" alt="还原">
</button>
<button type="button" class="closeWindow">
<img src="file:///D:/img/关闭.svg" alt="关闭">
</button>
</menu>
</header>
`;
/* 现在时间 极端的例子，仅供娱乐*/
(s = el => { d = new Date, f = n => ("0" + n).slice(-2), w = "日一二三四五六"; el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}` })(setInterval(() => ["dateTime"].forEach(id => s(document.getElementById(id))), 1000));
/* 现在时间 结束 */
/* 全屏函数
*
* @returns 无返回值
*/
function fullScreen() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
}
/**
* 退出全屏模式
*
* @returns 无返回值
*/
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
// 获取全屏和还原按钮
var fullScreenBtn = document.querySelector(".fullScreen");
var exitFullScreenBtn = document.querySelector(".exitFullScreen");
var closeWindowBtn = document.querySelector(".closeWindow");
// 绑定点击事件
fullScreenBtn.addEventListener("click", fullScreen);
exitFullScreenBtn.addEventListener("click", exitFullScreen);
closeWindowBtn.addEventListener("click", function () {
window.close();
});
// 监听全屏和还原事件
document.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
fullScreenBtn.style.display = "none";
exitFullScreenBtn.style.display = "block";
} else {
fullScreenBtn.style.display = "block";
exitFullScreenBtn.style.display = "none";
}
});
// 全屏功能与关闭 结束
/*头部staticHeader 结束
*-------------------------------------------------------------------------------------------------
*/
/* 独特的倒计时容器uniqueCountdownContainer 开始 */
/* 原神元素颜色数据
const elementColors = {
"火": "#FF9933",
"水": "#3399FF",
"风": "#66c6ac",
"雷": "#CC66FF",
"草": "#66CC66",
"冰": "#99CCFF",
"岩": "#FFCC33"
};*/
let colorIndex = 0; // 初始化颜色索引
function getRandomColor() {
const elements = Object.keys(elementColors); // 获取所有元素名称（原神元素颜色数据)
colorIndex = (colorIndex + 1) % elements.length; // 递增索引，并在达到数组长度时重置为0
return elementColors[elements[colorIndex]]; // 返回该元素对应的颜色
}
/**
* 更新倒计时
*
* @param elementId 倒计时元素ID
* @param targetDate 目标日期
*/
function updateCountdown(elementId, targetDate) {
const countdownElement = document.getElementById(elementId);
const update = () => {
const now = new Date();
const total = targetDate - now;
const absTotal = Math.abs(total);
const seconds = Math.floor((absTotal / 1000) % 60);
const minutes = Math.floor((absTotal / 1000 / 60) % 60);
const hours = Math.floor((absTotal / (1000 * 60 * 60)) % 24);
const days = Math.floor(absTotal / (1000 * 60 * 60 * 24));
const timeStr = `${days}天${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
countdownElement.textContent = total <= 0 ? `-${timeStr}` : timeStr;
};
const padZero = num => num < 10 ? `0${num}` : num;
update();
setInterval(update, 1000);
}
document.getElementById('uniqueCountdownContainer').innerHTML = `
<!-- 默认的倒计时DefaultCountdown -->
<div id="DefaultCountdown" style="cursor: move;"></div>
<button id="operativeFunction" class="operativeFunction" style=" color:#e6a23c;">操作</button>
<div class="uniqueCountdowns-Button">
<!--动态倒计时区 -->
<div id="uniqueCountdowns"></div>
<!-- 按钮区 -->
<menu>
<button class="uniqueAddButton" onclick="showAddCountdownDialog()" style="display: none; color: #67c23a;">添加</button>
<button class="uniqueEditButton " onclick="editSelectedCountdown()" style="display: none;color: #e6a23c;">改</button>
<button class="uniqueDeleteButton " onclick="deleteSelectedCountdown()" style="display: none;color: red;">删</button>
</menu>
</div>
<dialog id="uniqueAddCountdownDialog">
<div>
<form>
<button id="uniqueCancelAdd" type="submit">取消添加</button>
<br>
<input type="text" id="uniquePromptInput" placeholder="提示信息">
<br>
<input type="datetime-local" id="uniqueDatetimeInput">
<button id="uniqueSaveButton" onclick="saveCountdown()">保存</button>
</form>
<ul>
<b>主要节日时间表</b>
<li>元旦:2025年1月1日</li>
<li>春节:2025年2月12日</li>
<li>清明节:2025年4月4日</li>
<li>劳动节:2025年5月1日</li>
<li>端午节:2025年6月2日</li>
<li>中秋节:2025年9月21日</li>
<li>国庆节:2025年10月1日</li>
</ul>
</div>
</dialog>
`;
// 为“操作”按钮添加点击事件监听器
document.getElementById('operativeFunction').addEventListener('click', function () {
const button = this;
const addButton = document.querySelector('.uniqueAddButton');
const editButton = document.querySelector('.uniqueEditButton');
const deleteButton = document.querySelector('.uniqueDeleteButton');
const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox');
const finishButtons = document.querySelectorAll('.finishButton');
if (button.textContent === '操作') {
button.textContent = '取消操作';
addButton.style.display = 'inline-block';
// editButton.style.display = 'inline-block';
// deleteButton.style.display = 'inline-block';
// checkboxes.forEach(checkbox => checkbox.style.display = 'inline-block');
finishButtons.forEach(finishButton => finishButton.style.display = 'inline-block');
} else {
button.textContent = '操作';
addButton.style.display = 'none';
// editButton.style.display = 'none';
// deleteButton.style.display = 'none';
// checkboxes.forEach(checkbox => checkbox.style.display = 'none');
finishButtons.forEach(finishButton => finishButton.style.display = 'none');
}
});
function showAddCountdownDialog() {
document.getElementById('uniqueAddCountdownDialog').showModal();
}
function saveCountdown() {
const promptInput = document.getElementById('uniquePromptInput').value.trim();
const datetimeInput = document.getElementById('uniqueDatetimeInput').value;
if (promptInput && datetimeInput) {
// 将用户输入的日期时间格式转换为202408111731格式
const formattedDatetime = datetimeInput.replace(/-/g, '').replace(/T/g, '').replace(/:/g, '');
const countdownDiv = document.getElementById('uniqueCountdowns');
const timestamp = Date.now();
const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
const countdownElement = document.createElement('div');
countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${promptInput}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label><button class="finishButton">完成</button>`;
countdownDiv.appendChild(countdownElement);
updateCountdown(`uniqueCountdown_${timestamp}`, new Date(datetimeInput.slice(0, 4), datetimeInput.slice(4, 6) - 1, datetimeInput.slice(6, 8), datetimeInput.slice(8, 10), datetimeInput.slice(10, 12)));
// 存储倒计时信息到 localStorage
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
prompt: promptInput,
datetime: formattedDatetime,
finished: false // 初始状态为未完成
}));
// 添加“完成”按钮的点击事件监听器
const finishButton = countdownElement.querySelector('.finishButton');
finishButton.addEventListener('click', () => {
const isFinished = countdownElement.classList.toggle('FinishTask');
finishButton.textContent = isFinished ? '取消' : '完成';
// 更新 localStorage 中的状态
const data = JSON.parse(localStorage.getItem(`uniqueCountdown_${timestamp}`));
data.finished = isFinished;
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify(data));
});
} else {
alert('请填写提示信息和目标日期');
}
}
// 页面加载时从 localStorage 中恢复倒计时
window.onload = function () {
const countdowns = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('uniqueCountdown_')) {
const data = JSON.parse(localStorage.getItem(key));
const timestamp = key.split('_')[1];
countdowns.push({ timestamp, data });
}
}
countdowns.sort((a, b) => a.timestamp - b.timestamp); // 按时间戳排序
countdowns.forEach(({ timestamp, data }, index) => {
const countdownDiv = document.getElementById('uniqueCountdowns');
const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
const countdownElement = document.createElement('div');
countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
if (index === 0) {
countdownElement.style.borderTopLeftRadius = '5px';
countdownElement.style.borderTopRightRadius = '5px';
}
if (index === countdowns.length - 1) {
countdownElement.style.borderBottomLeftRadius = '5px';
countdownElement.style.borderBottomRightRadius = '5px';
}
countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label><button class="finishButton">${data.finished ? '取消' : '完成'}</button>`;
countdownDiv.appendChild(countdownElement);
updateCountdown(`uniqueCountdown_${timestamp}`, new Date(data.datetime.slice(0, 4), data.datetime.slice(4, 6) - 1, data.datetime.slice(6, 8), data.datetime.slice(8, 10), data.datetime.slice(10, 12)));
// 根据 localStorage 中的状态设置类名
if (data.finished) {
countdownElement.classList.add('FinishTask');
}
// 添加“完成”按钮的点击事件监听器
const finishButton = countdownElement.querySelector('.finishButton');
finishButton.addEventListener('click', () => {
const isFinished = countdownElement.classList.toggle('FinishTask');
finishButton.textContent = isFinished ? '取消' : '完成';
// 更新 localStorage 中的状态
data.finished = isFinished;
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify(data));
});
});
// 添加默认倒计时
const defaultCountdowns = [
{ prompt: "国庆节", datetime: "202410010000" },
{ prompt: "星尘兑换纠缠之缘时间", datetime: "202410010400" },
{ prompt: "幻想真境剧诗重置时间", datetime: "202410010400" },
{ prompt: "渊月螺旋重置时间", datetime: "202409160400" },
{ prompt: "限时祈愿", datetime: "202409171759" }
];
const defaultCountdownDiv = document.getElementById('DefaultCountdown');
defaultCountdowns.forEach(({ prompt, datetime }, index) => {
const countdownElement = document.createElement('div');
countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
countdownElement.innerHTML = `<strong>${prompt}</strong>:<span id="defaultCountdown_${index}"></span><button class="finishButton">完成</button>`;
defaultCountdownDiv.appendChild(countdownElement);
updateCountdown(`defaultCountdown_${index}`, new Date(datetime.slice(0, 4), datetime.slice(4, 6) - 1, datetime.slice(6, 8), datetime.slice(8, 10), datetime.slice(10, 12)));
// 从 localStorage 中恢复默认倒计时的状态
const defaultData = JSON.parse(localStorage.getItem(`defaultCountdown_${index}`));
if (defaultData && defaultData.finished) {
countdownElement.classList.add('FinishTask');
countdownElement.querySelector('.finishButton').textContent = '取消';
}
// 添加“完成”按钮的点击事件监听器
const finishButton = countdownElement.querySelector('.finishButton');
finishButton.addEventListener('click', () => {
const isFinished = countdownElement.classList.toggle('FinishTask');
finishButton.textContent = isFinished ? '取消' : '完成';
// 更新 localStorage 中的状态
const defaultData = {
prompt: prompt,
datetime: datetime,
finished: isFinished
};
localStorage.setItem(`defaultCountdown_${index}`, JSON.stringify(defaultData));
});
});
// 应用最后一个倒计时的样式
applyLastCountdownStyle();
};
function editSelectedCountdown() {
const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
if (checkboxes.length === 0) return;
checkboxes.forEach(checkbox => {
const timestamp = checkbox.value;
const data = JSON.parse(localStorage.getItem(`uniqueCountdown_${timestamp}`));
if (data) { // 检查数据是否存在
const newPrompt = prompt('请输入新的提示信息', data.prompt);
const newDatetime = prompt('目标日期(YYYYMMDDHHMM,例如:202410010400)', data.datetime);
if (newPrompt && newDatetime) {
// 删除旧的复选框
checkbox.parentNode.remove();
// 添加新的复选框并更新倒计时
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
prompt: newPrompt,
datetime: newDatetime
}));
const countdownDiv = document.getElementById('uniqueCountdowns');
const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
const countdownElement = document.createElement('div');
countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${newPrompt}</strong>: <span id="uniqueCountdown_${timestamp}"></span></label>`;
countdownDiv.appendChild(countdownElement);
updateCountdown(`uniqueCountdown_${timestamp}`, new Date(newDatetime.slice(0, 4), newDatetime.slice(4, 6) - 1, newDatetime.slice(6, 8), newDatetime.slice(8, 10), newDatetime.slice(10, 12)));
}
} else {
console.error(`Countdown data for timestamp ${timestamp} not found in localStorage.`);
}
});
// 重置复选框状态
checkboxes.forEach(checkbox => {
checkbox.checked = false;
});
// 手动触发change事件以恢复最初状态
document.dispatchEvent(new Event('change'));
}
/**
* 删除选中的倒计时
*
* @returns 无返回值
*/
function deleteSelectedCountdown() {
const confirmDelete = confirm("确定要删除选中的倒计时吗？");
if (confirmDelete) {
const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
checkboxes.forEach(checkbox => {
const timestamp = checkbox.value;
localStorage.removeItem(`uniqueCountdown_${timestamp}`);
checkbox.parentNode.remove();
});
// 重置所有复选框状态
document.querySelectorAll('.uniqueCountdownCheckbox').forEach(checkbox => {
checkbox.checked = false;
});
// 隐藏编辑和删除按钮，显示添加按钮
document.querySelector('.uniqueEditButton').style.display = 'none';
document.querySelector('.uniqueDeleteButton').style.display = 'none';
// document.querySelector('.uniqueAddButton').style.display = 'inline-block';
// 手动触发change事件以恢复最初状态
document.dispatchEvent(new Event('change'));
// 重新检查并应用样式
applyLastCountdownStyle();
}
}
/**
* 应用最后一个倒计时的样式
*/
function applyLastCountdownStyle() {
const countdownDiv = document.getElementById('uniqueCountdowns');
const countdownElements = countdownDiv.querySelectorAll('div');
if (countdownElements.length > 0) {
const lastElement = countdownElements[countdownElements.length - 1];
lastElement.style.borderBottomLeftRadius = '5px';
lastElement.style.borderBottomRightRadius = '5px';
}
}
// 监听复选框状态变化
document.addEventListener('change', function (event) {
const editButton = document.querySelector('.uniqueEditButton');
const deleteButton = document.querySelector('.uniqueDeleteButton');
const addCountdownButton = document.querySelector('.uniqueAddButton');
const checkedCheckboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
// 简化条件判断和样式设置
const isChecked = checkedCheckboxes.length > 0;
editButton.style.display = isChecked ? 'inline-block' : 'none';
deleteButton.style.display = isChecked ? 'inline-block' : 'none';
// addCountdownButton.style.display = isChecked ? 'none' : 'inline-block';
// 获取#uniqueCountdownContainer元素
const countdownContainer = document.querySelector('#uniqueCountdownContainer');
if (isChecked) {
// 修改样式
countdownContainer.style.backgroundColor = '#e63c3c';
countdownContainer.querySelectorAll('label').forEach(label => {
label.style.backgroundColor = '#e63c3c';
});
countdownContainer.querySelectorAll('strong').forEach(strong => {
strong.style.color = '#ffffff';
strong.style.textShadow = '2px 2px 2px #000000';
});
countdownContainer.querySelectorAll('span').forEach(span => {
span.style.color = '#000000';
span.style.textShadow = '1px 1px 1px #fffefe';
});
countdownContainer.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.style.display = 'inline-block';
});
if (index === countdowns.length - 1) {
countdownElement.style.borderBottomLeftRadius = '5px';
countdownElement.style.borderBottomRightRadius = '5px';
}
} else {
// 恢复默认样式（如果需要）
countdownContainer.style.backgroundColor = '';
countdownContainer.querySelectorAll('label').forEach(label => {
label.style.backgroundColor = '';
});
countdownContainer.querySelectorAll('strong').forEach(strong => {
strong.style.color = '';
strong.style.textShadow = '';
});
countdownContainer.querySelectorAll('span').forEach(span => {
span.style.color = '';
span.style.textShadow = '';
});
countdownContainer.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.style.display = '';
});
}
});
// 拖动倒计时容器
document.addEventListener('DOMContentLoaded', (event) => {
let isDragging = false;
let offset = { x: 0, y: 0 };
const container = document.getElementById('uniqueCountdownContainer');
const dragElement = document.getElementById('DefaultCountdown');
dragElement.addEventListener('mousedown', (e) => {
isDragging = true;
offset.x = container.offsetLeft - e.clientX;
offset.y = container.offsetTop - e.clientY;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
container.style.left = e.clientX + offset.x + 'px';
container.style.top = e.clientY + offset.y + 'px';
}
});
});
/* 独特的倒计时容器uniqueCountdownContainer 结束
---------------------------------------------------------------------------------------------------------------
*/
/* 所有表格的“切换数据”按钮都会被触发*/
document.getElementById('globalSwitchButton').addEventListener('click', function () {
const switchButtons = document.querySelectorAll('#GenshinRoleTable #switchButton, #haveGenshinRole #switchButton, #cultivateGenshinRole #switchButton, #pairingGenshinRole #switchButton');
switchButtons.forEach(button => button.click());
});
/* 所有表格的“切换数据”按钮都会被触发 结束*/
/* 原神版本角色数据函数*/
function renderGenshinRoleTable(GenshinRole, haveGenshinRole134, haveGenshinRole152, elementColors) {
let currentData = haveGenshinRole134;
function getElementColor(e) { return elementColors[e]; }
function getElementImage(e) { return GenshinRole.find(el => el.element === e)?.elementImage || ""; }
function getCharacterImage(r) { return GenshinRole.find(el => el.role.some(role => role.name === r))?.role.find(role => role.name === r)?.image || ""; }
function isCharacterOwned(c, d) { return d.some(el => el.role.some(role => role.name === c)); }
function renderTable() {
const table = document.getElementById("GenshinRoleTable");
table.innerHTML = `
<caption>
<b>原神5.0版本角色数据</b>
<a href="https://genshin-builds.com/cn/characters" target="_blank">数据来源：(genshin-builds.com)</a>
<button id='switchButton'>切换数据</button>
</caption>
<tr>
<th>序号</th>
<th colspan="2">元素</th>
<th colspan="2">角色</th>
<th>${currentData === haveGenshinRole134 ? "134角色" : "152角色"}</th>
</tr>`;
let row = 1, lastElement = null;
GenshinRole.forEach(el => {
el.role.forEach((char, idx) => {
const newRow = table.insertRow();
newRow.insertCell().textContent = row++;
if (el.element !== lastElement) {
const cell = newRow.insertCell();
cell.rowSpan = el.role.length;
const img = document.createElement('img');
img.src = getElementImage(el.element);
img.style.width = '24px';
img.onerror = () => cell.textContent = el.element;
img.title = el.element;
cell.appendChild(img);
lastElement = el.element;
}
newRow.insertCell().textContent = idx + 1;
const charImgCell = newRow.insertCell();
const charImg = document.createElement('img');
charImg.src = getCharacterImage(char.name);
charImg.style.width = '48px';
charImg.style.transition = 'transform 0.25s';
charImg.addEventListener('mouseenter', () => charImg.style.transform = 'scale(3)');
charImg.addEventListener('mouseleave', () => charImg.style.transform = 'scale(1)');
charImgCell.appendChild(charImg);
const roleCell = newRow.insertCell();
roleCell.textContent = char.name;
roleCell.style.color = char.star === "5" ? "#ac7647" : "#846baa";
const btnCell = newRow.insertCell();
const isOwned = isCharacterOwned(char.name, currentData);
const btn = document.createElement('button');
btn.textContent = isOwned ? '' : '没有';
btn.className = isOwned ? 'checkButton' : '';
btnCell.appendChild(btn);
newRow.style.backgroundColor = getElementColor(el.element);
});
});
// 重新获取按钮并添加事件监听器
document.getElementById('switchButton').removeEventListener('click', switchData); // 移除旧的事件监听器
document.getElementById('switchButton').addEventListener('click', switchData); // 添加新的事件监听器
}
function switchData() {
currentData = currentData === haveGenshinRole134 ? haveGenshinRole152 : haveGenshinRole134;
renderTable();
}
renderTable();
}
// 调用原神版本角色数据函数
renderGenshinRoleTable(GenshinRole, haveGenshinRole134, haveGenshinRole152, elementColors);
/* 原神版本角色数据函数 结束*/
/*已有角色数据列表*/
function initializeGenshinRoleTable(tableId, captionText, isAddButton, haveGenshinRole134, haveGenshinRole152, elementColors, GenshinRole, introductionLinks, cultivateGenshinRole134, cultivateGenshinRole152) {
let currentHaveGenshinRoleData = haveGenshinRole134;
let isSorted = false;
function getElementColor(element) {
return elementColors[element];
}
function initializeTable(table, captionText, isAddButton = false) {
table.innerHTML = `
<caption>
<b>${captionText}</b>
</caption>
<tr>
<th>序号</th>
<th>角色</th>
<th>等级</th>
<th>命座</th>
<th style="width:70px;">天赋</th>
</tr>`;
if (isAddButton) {
addSortButton(table);
addSwitchButton(table);
}
}
function addSortButton(table) {
const sortButton = createButton('sortButton', '品质排序', () => {
isSorted = !isSorted;
sortTable(table, isSorted);
});
table.querySelector('caption b').insertAdjacentElement('afterend', sortButton);
}
function addSwitchButton(table) {
const switchButton = createButton('switchButton', '切换数据', () => {
currentHaveGenshinRoleData = currentHaveGenshinRoleData === haveGenshinRole134 ? haveGenshinRole152 : haveGenshinRole134;
renderTable(table);
});
table.querySelector('caption b').insertAdjacentElement('afterend', switchButton);
}
function hideStars(table) {
table.querySelectorAll('.hidden-star').forEach(th => th.style.display = 'none');
}
function createButton(id, text, onClick) {
const button = document.createElement('button');
button.id = id;
button.innerHTML = text;
button.addEventListener('click', onClick);
return button;
}
function renderTable(table) {
initializeTable(table, currentHaveGenshinRoleData === haveGenshinRole134 ? "134获得角色数据" : "152获得角色数据", true);
let row = 1;
currentHaveGenshinRoleData.forEach(elementData => {
elementData.role.forEach(character => {
addCharacterRow(table, character, elementData.element, row++);
});
});
}
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 addCharacterRow(table, character, element, rowNumber) {
const newRow = table.insertRow();
newRow.insertCell().textContent = rowNumber;
const roleCell = newRow.insertCell();
roleCell.textContent = character.name;
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.style.backgroundColor = getElementColor(element);
// 检查是否需要添加 cultivateButton
const cultivateRoles = currentHaveGenshinRoleData === haveGenshinRole134 ? cultivateGenshinRole134 : cultivateGenshinRole152;
if (cultivateRoles.includes(character.name)) {
const cultivateButton = document.createElement('button');
cultivateButton.className = 'cultivate';
roleCell.appendChild(cultivateButton);
}
}
function sortTable(table, isSorted) {
const rows = Array.from(table.rows).slice(1);
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 (isSorted) {
if (starA === "5" && starB !== "5") return -1;
if (starA !== "5" && starB === "5") return 1;
return constellationB - constellationA;
} else {
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);
const element = row.cells[1].textContent;
if (isSorted && (star === "5" || constellation === 6)) {
row.cells[1].style.backgroundColor = star === "5" ? "#ac7647" : "#846baa";
row.cells[2].style.backgroundColor = star === "5" ? "#ac7647" : "#846baa";
row.cells[3].style.backgroundColor = star === "5" ? "#ac7647" : "#846baa";
row.cells[4].style.backgroundColor = star === "5" ? "#ac7647" : "#846baa";
row.cells[5].style.backgroundColor = star === "5" ? "#ac7647" : "#846baa";
} else {
row.cells[1].style.backgroundColor = elementColors[element] || '';
row.cells[2].style.backgroundColor = elementColors[element] || '';
row.cells[3].style.backgroundColor = elementColors[element] || '';
row.cells[4].style.backgroundColor = elementColors[element] || '';
row.cells[5].style.backgroundColor = elementColors[element] || '';
}
});
}
const table = document.getElementById(tableId);
renderTable(table);
}
initializeGenshinRoleTable(
"haveGenshinRole", // tableId
"134获得角色数据", // captionText
true, // isAddButton
haveGenshinRole134, // haveGenshinRole134
haveGenshinRole152, // haveGenshinRole152
elementColors, // elementColors
GenshinRole, // GenshinRole
introductionLinks, // introductionLinks
cultivateGenshinRole134, // cultivateGenshinRole134
cultivateGenshinRole152 // cultivateGenshinRole152
);
/*已有角色数据列表 结束*/
/*重点培养角色列表函数*/
function initializeAndRenderTable() {
let addedCharacters = []; // 用于存储已经添加的角色
function getElementColor(element) {
return elementColors[element];
}
let isSorted = false;
let currentCultivateGenshinRoleData = cultivateGenshinRole134;
function initializeTable(table, captionText, isAddButton = false) {
table.innerHTML = `
<caption>
<b>${captionText}</b>
</caption>
<tr>
<th>序号</th>
<th>配对</th>
<th style="width:100px;">角色</th>
<th>等级</th>
<th>命座</th>
<th style="width:70px;">天赋</th>
<th style="width:235px;">攻略</th>
<th style="width:225px;">localStorage备注</th>
</tr>
`;
if (isAddButton) {
const switchButton = document.createElement('button');
switchButton.id = 'switchButton';
switchButton.innerHTML = '切换数据';
table.querySelector('caption b').insertAdjacentElement('afterend', switchButton);
switchButton.addEventListener('click', () => {
currentCultivateGenshinRoleData = currentCultivateGenshinRoleData === cultivateGenshinRole134 ? cultivateGenshinRole152 : cultivateGenshinRole134;
renderTable();
});
}
createPopup(table, captionText);
}
function createPopup(table, captionText) {
const popup = document.createElement('div');
popup.style.display = 'none';
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.backgroundColor = 'white';
popup.style.border = '1px solid black';
popup.style.padding = '20px';
popup.style.zIndex = '1000';
const closeButton = document.createElement('button');
closeButton.innerHTML = '关闭';
closeButton.onclick = () => popup.style.display = 'none';
popup.appendChild(closeButton);
introductionLinks.forEach(link => {
const a = document.createElement('a');
a.href = link.url;
a.target = '_blank';
a.innerHTML = link.name;
a.style.display = 'block';
a.style.margin = '10px 0';
popup.appendChild(a);
});
if (captionText === "134重点培养的角色" || captionText === "152重点培养的角色") {
const IntroductionGenshinButton = document.createElement('button');
IntroductionGenshinButton.type = 'button';
IntroductionGenshinButton.id = 'IntroductionGenshin';
IntroductionGenshinButton.innerHTML = '原神攻略';
IntroductionGenshinButton.onclick = () => popup.style.display = 'block';
table.querySelector('caption b').insertAdjacentElement('afterend', IntroductionGenshinButton);
}
document.body.appendChild(popup);
}
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 "";
}
let isPopupVisible = false; // 全局标志变量，用于跟踪当前是否有弹窗显示
function addCharacterRow(table, characterName, element, rowNumber, isCultivateList) {
let characterData = null;
let haveGenshinRoleData = currentCultivateGenshinRoleData === cultivateGenshinRole134 ? haveGenshinRole134 : haveGenshinRole152;
// 查找角色数据
for (const elementData of haveGenshinRoleData) {
const role = elementData.role.find(r => r.name === characterName);
if (role) {
characterData = role;
break;
}
}
if (!characterData) {
console.error(`角色 ${characterName} 未找到数据`);
return;
}
const newRow = table.insertRow();
newRow.insertCell().textContent = rowNumber;
newRow.insertCell().textContent = (rowNumber - 1) % 4 + 1;
const roleCell = newRow.insertCell();
roleCell.textContent = characterData.name;
const star = getStar(characterData.name, element);
roleCell.style.color = star === "5" ? "#ac7647" : "#846baa";
// 检查角色是否重复
const isDuplicate = Array.from(table.rows).some(row => row.cells[2].textContent === characterName && row !== newRow);
if (isDuplicate) {
const duplicateSpan = document.createElement('sup');
duplicateSpan.style.fontSize = '0.1em'; // 调整字体大小以适应上标效果
duplicateSpan.textContent = '(复用)';
roleCell.appendChild(duplicateSpan);
}
const starCell = newRow.insertCell();
starCell.textContent = star;
starCell.style.display = 'none';
newRow.insertCell().innerHTML = `<span >${characterData.level}</span>`;
newRow.insertCell().innerHTML = `<span >${characterData.constellation}</span>`;
newRow.insertCell().innerHTML = `<span >${characterData.talent}</span>`;
const StrategyCell = newRow.insertCell();
StrategyCell.innerHTML = `<span >${characterData.Strategy}</span>`;
const hasIntroductionLinks = introductionLinks.some(link => link.name.includes(characterData.name));
if (hasIntroductionLinks) {
const strategyButton = document.createElement('button');
strategyButton.textContent = '攻略';
strategyButton.addEventListener('click', (event) => showIntroductionLinks(characterData.name, event));
StrategyCell.appendChild(strategyButton);
}
const noteCell = newRow.insertCell();
const notePrefix = currentCultivateGenshinRoleData === cultivateGenshinRole134 ? 'note_134_' : 'note_152_';
const storedNote = localStorage.getItem(`${notePrefix}${characterData.name}`);
noteCell.innerHTML = `<span>${storedNote || '备注'}</span>`;
noteCell.addEventListener('click', () => {
const newNote = prompt("请输入新的备注:", storedNote || '');
if (newNote !== null) {
localStorage.setItem(`${notePrefix}${characterData.name}`, newNote);
noteCell.innerHTML = `<span>${newNote}</span>`;
}
});
newRow.style.backgroundColor = getElementColor(element);
if (table.id === "cultivateGenshinRole" && rowNumber % 4 === 0) {
newRow.style.borderBottom = '5px solid #ff0000';
}
}
function renderTable() {
const cultivateGenshinRoleTable = document.getElementById("cultivateGenshinRole");
initializeTable(cultivateGenshinRoleTable, currentCultivateGenshinRoleData === cultivateGenshinRole134 ? "134重点培养的角色" : "152重点培养的角色", true);
addedCharacters = []; // 清空已添加角色列表
let row = 1;
currentCultivateGenshinRoleData.forEach((characterName) => {
const elementData = GenshinRole.find(e => e.role.some(r => r.name === characterName));
if (elementData) {
addCharacterRow(cultivateGenshinRoleTable, characterName, elementData.element, row++);
}
});
}
function showIntroductionLinks(roleName, event) {
if (isPopupVisible) return; // 如果已经有弹窗显示，则直接返回，不再创建新的弹窗
const filteredLinks = introductionLinks.filter(link => link.name.includes(roleName));
if (filteredLinks.length > 0) {
const popup = createIntroductionPopup(filteredLinks, event);
document.body.appendChild(popup);
isPopupVisible = true; // 设置标志变量为 true，表示有弹窗显示
// 设置定时器，5秒后自动关闭弹窗
setTimeout(() => {
popup.remove();
isPopupVisible = false; // 弹窗关闭后，重置标志变量
}, 5000);
}
}
function createIntroductionPopup(links, event) {
const popup = document.createElement('div');
popup.style.display = 'block';
popup.style.position = 'fixed';
popup.style.top = `${event.clientY + 10}px`;
popup.style.left = `${event.clientX + 10}px`;
popup.style.backgroundColor = 'white';
popup.style.border = '1px solid black';
popup.style.padding = '20px';
popup.style.zIndex = '1000';
createCloseButton(popup);
// 动态生成链接列表
links.forEach(link => {
const a = document.createElement('a');
a.href = link.url;
a.target = '_blank';
a.innerHTML = link.name;
a.style.display = 'block';
a.style.margin = '10px 0';
popup.appendChild(a);
});
return popup;
}
function createCloseButton(popup) {
const closeButton = document.createElement('button');
let seconds = 4;
closeButton.textContent = `5秒关闭`; // 立即设置文本
const countdownInterval = setInterval(() => {
if (seconds > 0) {
closeButton.textContent = `${seconds}秒关闭`;
seconds--;
} else {
clearInterval(countdownInterval); // 清除定时器
popup.remove();
isPopupVisible = false; // 点击关闭按钮时，重置标志变量
}
}, 1000);
closeButton.onclick = () => {
clearInterval(countdownInterval); // 清除定时器
popup.remove();
isPopupVisible = false; // 点击关闭按钮时，重置标志变量
};
popup.appendChild(closeButton);
}
renderTable();
}
initializeAndRenderTable();
/*重点培养角色列表函数 结束
-----------------------------------------------------------------------------------------------------
*/
/*修改数据器*/
/*修改数据器*/
function initializeFileEditor() {
// 初始化对话框内容
document.getElementById('addReadFolderArea').innerHTML = `
<div id="addReadFolder">
<form id="buttonContainer">
<div id="fileTree"></div>
<button type="button" id="fileSave">保存</button>
<button type="submit" class="cancel-button">关闭</button>
</form>
<div id="fileContent" contenteditable="true" name="textarea1"></div>
</div>
`;
// 简陋的编辑器功能
let currentFileHandle = null; // 变量用于存储当前文件句柄
document.getElementById('readFolder').addEventListener('click', async () => {
try {
const directoryHandle = await window.showDirectoryPicker();
const fileTree = document.getElementById('fileTree');
const fileContent = document.getElementById('fileContent');
fileTree.innerHTML = ''; // 清空文件树内容
fileContent.innerHTML = ''; // 清空文件内容区域
async function readDirectory(directoryHandle, parentElement) {
const ul = document.createElement('ul');
parentElement.appendChild(ul);
for await (const entry of directoryHandle.values()) {
const li = document.createElement('li');
const entryName = document.createElement('span');
entryName.textContent = entry.name;
li.appendChild(entryName);
ul.appendChild(li);
if (entry.kind === 'directory') {
entryName.textContent = `[文件夹] ${entry.name}`;
li.addEventListener('click', async (e) => {
e.stopPropagation();
if (li.classList.contains('open')) {
li.classList.remove('open');
li.querySelector('ul').remove();
} else {
li.classList.add('open');
await readDirectory(entry, li);
}
});
} else if (entry.kind === 'file') {
li.addEventListener('click', async (e) => {
e.stopPropagation();
currentFileHandle = entry;
const file = await entry.getFile();
fileContent.style.display = 'block';
fileContent.textContent = await file.text();
// 使用 highlight.js 高亮显示代码
hljs.highlightElement(fileContent);
});
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.classList.add('delete-button');
deleteButton.addEventListener('click', async (e) => {
e.stopPropagation();
if (confirm(`确定删除 ${entry.name}?`)) {
await directoryHandle.removeEntry(entry.name);
li.remove();
fileContent.innerHTML = '';
alert('文件删除成功!');
}
});
entryName.appendChild(deleteButton);
}
}
}
await readDirectory(directoryHandle, fileTree);
} catch (error) {
console.error('操作失败:', error);
alert('操作失败，请重试。');
}
});
// 同时按下Ctrl键和's'键保存
document.addEventListener('keydown', async (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败，请重试。');
}
}
});
// 为id="fileSave"的保存按钮添加保存功能
document.getElementById('fileSave').addEventListener('click', async () => {
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
} else {
alert('请先选择一个文件进行编辑。');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败，请重试。');
}
});
}
// 初始化文件编辑器
initializeFileEditor();
/*修改数据器 结束*/
</script>
<!-- 修改数据器引入 highlight.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
