- <!DOCTYPE html>
- <html lang="zh-cn">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>原神4.8版本抽到角色和重点培养数据表</title>
- </head>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- body {
- background: #1c3b5c;
- }
- a {
- color: #e6a23c;
- }
- }
- /* 头部样式 */
- header {
- 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: 2px;
- 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);
- }
- }
- }
- /* 头部样式 结束 */
- /* 倒计时样式 */
- .countdown {
- width: 99vw;
- height: 40px;
- display: flex;
- position: fixed;
- transform: translate(0%, 101%);
- background-color: #cbcbcb;
- button {
- cursor: pointer;
- }
- /* 添加的倒计时集合区 */
- #countdownContainer {
- display: flex;
- /* 换行 */
- flex-wrap: wrap;
- .deleteButtonCountdownContainer {
- display: none;
- color: red;
- }
- }
- #countdownForm {
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 5px;
- background-color: #f3f3f3;
- }
- }
- /* 主要main样式 */
- main {
- display: flex;
- /* 列表样式 */
- table {
- border-collapse: collapse;
- caption {
- background-color: #80a4b1;
- border-radius: 5px 5px 0 0;
- span {
- /* 粗字体 */
- font-weight: bold;
- }
- }
- 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;
- }
- }
- /* 原神版本角色列表样式 */
- #character-table {
- margin-top: 81px;
- .character-image,
- .element-image {
- /* 默认隐藏角色图片和元素图片 */
- display: none;
- position: absolute;
- }
- .addButton134152 {
- width: 20px;
- height: 20px;
- padding: 2px;
- border-radius: 50%;
- background-color: #67c23a;
- background-image: linear-gradient(to top left,
- rgba(0, 0, 0, 0.2),
- rgba(0, 0, 0, 0.2) 30%,
- rgba(0, 0, 0, 0));
- box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
- inset -4px -4px 5px rgba(0, 0, 0, 0.6);
- border: 0px solid black;
- }
- /* 按钮√ */
- .addButton {
- background-color: #f9030300;
- display: none;
- height: 15px;
- width: 25px;
- border-top: none;
- border-right: none;
- border-radius: 0;
- transform: rotate(-45deg);
- transition: all 0.5s ease-in-out;
- }
- }
- .upgrade-table {
- margin-top: 81px;
- display: flex;
- /* 升级数据表的编辑按钮:等级\命座\天赋\备注 */
- .editable {
- /* 鼠标变小手 */
- cursor: pointer;
- &:hover {
- background-color: #000000;
- border-radius: 3px;
- padding: 5px;
- /* 添加过渡效果 */
- transition: background-color 0.3s ease, padding 0.3s ease;
- }
- }
- }
- }
- /* 主要main样式 结束 */
- </style>
- <body>
- <!-- 头部 -->
- <header>
- <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" class="home_page"
- title="首页" target="_blank">
- <img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
- </a>
- </figure>
- <time datetime="2024-07-10" title="2024-07-10" 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="全屏"
- onclick="fullScreen()"></button>
- <button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"
- onclick="exitFullScreen()"></button>
- <button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"></button>
- </menu>
- </header>
- <!-- 头部 结束 -->
- <!-- 添加倒计时 -->
- <div class="countdown">
- <!-- 倒计时集合区-->
- <div id="countdownContainer"></div>
- <!-- 添加倒计时表单 -->
- <div id="addCountdownDisplay"></div>
- </div>
- <!-- 主要main -->
- <main>
- <!-- 角色列表 -->
- <table id="character-table">
- <caption>
- <span>原神4.8版本角色列表 </span>
- <a href="https://genshin-builds.com/cn/characters" target="_blank">数据来源:(genshin-builds.com)</a>
- <button class="addButton134152"></button>
- </caption>
- <tr>
- <th>序号</th>
- <th>元素</th>
- <th>角色</th>
- <th>星级</th>
- <th>添加</th>
- <th>添加</th>
- </tr>
- </table>
- <!-- 升级数据表 -->
- <div class="upgrade-table">
- <div>
- <table id="characterTable134"></table>
- </div>
- <div>
- <table id="characterTable152"></table>
- </div>
- </div>
- </main>
- <!-- 主要main 结束 -->
- </body>
- <script>
- /* 页面加载完成后才执行必要的初始化操作*/
- window.addEventListener('load', () => {
- renderTable('1340', 'characterTable134');
- renderTable('1520', 'characterTable152');
- initButtons();
- });
- /* 页面加载完成后才执行必要的初始化操作 结束*/
- /* 现在时间*/
- function showTime() {
- var time = document.getElementById("dateTime");
- var d = new Date();
- var y = d.getFullYear();
- var m = padZero(d.getMonth() + 1);
- var W = "星期" + "日一二三四五六".charAt(d.getDay());
- var D = padZero(d.getDate());
- var H = padZero(d.getHours());
- var M = padZero(d.getMinutes());
- var S = padZero(d.getSeconds());
- time.innerHTML = y + '-' + m + '-' + D + '<sub>' + W + '</sub>' + H + ':' + M + ':' + S;
- }
- function padZero(num) {
- return num < 10 ? "0" + num : num;
- }
- showTime();
- setInterval(showTime, 1000);
- /* 现在时间 结束*/
- /* 全屏功能与关闭*/
- 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();
- }
- }
- 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");
- // 监听全屏和还原事件
- document.addEventListener("fullscreenchange", function () {
- if (document.fullscreenElement) {
- fullScreenBtn.style.display = "none";
- exitFullScreenBtn.style.display = "block";
- } else {
- fullScreenBtn.style.display = "block";
- exitFullScreenBtn.style.display = "none";
- }
- });
- // 关闭当前窗口
- function closeAll() {
- window.close();
- }
- /* 全屏功能与关闭 结束*/
- /* 添加倒计时 开始*/
- var isPaused = false;
- var addButtonClicked = false;
- var pauseInterval = null;
- // 初始化倒计时
- function initCountdown() {
- initUI();
- updateCountdowns();
- setInterval(updateCountdowns, 1000);
- }
- // 初始化用户界面
- function initUI() {
- var body = getElement("addCountdownDisplay");
- body.innerHTML += `<button id="addButton">添加</button> <button id="cancelButton" style="display: none;" onclick="handleCancelOrResume()">取消 倒计时: 10秒恢复运行</button>`;
- body.innerHTML += `<div id="countdownForm" style="display: none;"><input type="text" id="countdownTitle" placeholder="提示信息"><br><input type="datetime-local" id="countdownDate"><button onclick="saveCountdown()">保存</button></div>`;
- getElement('addButton').onclick = function () {
- if (!addButtonClicked) {
- addButtonClicked = true;
- addCountdown();
- getElement('cancelButton').style.display = 'inline'; // 显示取消按钮
- getElement('addButton').style.display = 'none'; // 隐藏添加按钮
- }
- };
- }
- // 更新倒计时显示
- function updateCountdowns() {
- if (isPaused) return;
- var container = getElement("countdownContainer");
- container.innerHTML = "";
- var countdowns = getCountdowns();
- countdowns.forEach(function (countdown, index) {
- var div = document.createElement("div");
- div.innerHTML = `<strong>${countdown.title}</strong>: ${getTimeRemaining(countdown.date)} <button onclick="confirmDelete(${index})" class="deleteButtonCountdownContainer">删除</button>`;
- container.appendChild(div);
- });
- }
- // 计算剩余时间
- function getTimeRemaining(endDate) {
- const total = Date.parse(endDate) - Date.parse(new Date());
- 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)}秒`;
- return total <= 0 ? `已过去${timeStr}` : timeStr;
- }
- // 补零
- function padZero(num) {
- return num < 10 ? `0${num}` : num;
- }
- // 添加倒计时
- function addCountdown() {
- getElement("countdownForm").style.display = "block";
- pauseCountdowns(10000);
- }
- // 暂停倒计时
- function pauseCountdowns(duration) {
- isPaused = true;
- showDeleteButtons();
- var timeLeft = 10;
- pauseInterval = setInterval(function () {
- timeLeft--;
- getElement('cancelButton').innerHTML = `取消 倒计时: ${padZero(timeLeft)}秒恢复运行`;
- if (timeLeft <= 0) {
- clearInterval(pauseInterval);
- getElement('countdownDisplay').style.display = "none";
- isPaused = false;
- hideDeleteButtons();
- getElement('cancelButton').innerHTML = `取消 倒计时:已恢复运行`;
- }
- }, 1000);
- }
- // 显示删除按钮
- function showDeleteButtons() {
- var deleteButtons = document.querySelectorAll('.deleteButtonCountdownContainer');
- deleteButtons.forEach(function (button) {
- button.style.display = 'inline';
- });
- }
- // 隐藏删除按钮
- function hideDeleteButtons() {
- var deleteButtons = document.querySelectorAll('.deleteButtonCountdownContainer');
- deleteButtons.forEach(function (button) {
- button.style.display = 'none';
- });
- }
- // 保存倒计时
- function saveCountdown() {
- var title = getElement("countdownTitle").value;
- var date = getElement("countdownDate").value;
- if (title && date) {
- var countdowns = getCountdowns();
- countdowns.push({ title: title, date: date });
- localStorage.setItem("countdowns", JSON.stringify(countdowns));
- getElement("countdownForm").style.display = "none";
- updateCountdowns();
- addButtonClicked = false;
- resumeCountdowns();
- getElement('cancelButton').style.display = 'none'; // 隐藏取消按钮
- getElement('addButton').style.display = 'inline'; // 显示添加倒计时按钮
- } else {
- alert("请填写完整的倒计时信息");
- }
- }
- // 取消倒计时
- function cancelCountdown() {
- getElement("countdownForm").style.display = "none";
- addButtonClicked = false;
- resumeCountdowns();
- getElement('cancelButton').style.display = 'none'; // 隐藏取消按钮
- getElement('addButton').style.display = 'inline'; // 显示添加倒计时按钮
- }
- // 确认删除倒计时
- function confirmDelete(index) {
- if (confirm("确定要删除这个倒计时吗?")) {
- deleteCountdown(index);
- resumeCountdowns();
- }
- }
- // 删除倒计时
- function deleteCountdown(index) {
- var countdowns = getCountdowns();
- countdowns.splice(index, 1);
- localStorage.setItem("countdowns", JSON.stringify(countdowns));
- updateCountdowns();
- getElement('cancelButton').style.display = 'none'; // 隐藏取消按钮
- getElement('addButton').style.display = 'inline'; // 显示添加倒计时按钮
- getElement("countdownForm").style.display = "none"; // 隐藏倒计时表单
- addButtonClicked = false;
- }
- // 获取所有倒计时
- function getCountdowns() {
- return JSON.parse(localStorage.getItem("countdowns")) || [];
- }
- // 恢复倒计时
- function resumeCountdowns() {
- isPaused = false;
- hideDeleteButtons();
- var countdownDisplay = getElement("countdownDisplay");
- if (countdownDisplay) {
- countdownDisplay.style.display = "none";
- }
- clearInterval(pauseInterval);
- getElement('cancelButton').innerHTML = `取消 倒计时:已恢复运行`; // 更新按钮文本
- }
- // 处理取消或恢复
- function handleCancelOrResume() {
- if (addButtonClicked) {
- cancelCountdown();
- } else {
- resumeCountdowns();
- }
- }
- // 获取元素
- function getElement(id) {
- return document.getElementById(id);
- }
- window.addEventListener('load', initCountdown);
- /* 添加倒计时 结束*/
- /* 原神4.8版本角色数据*/
- const characters = [
- {
- element: "火", // 元素类型
- elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Pyro.png?strip=all&quality=75&w=48", // 元素图标
- role: [
- { star: "5", name: "阿蕾奇诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arlecchino/image.png?strip=all&quality=100&w=140", },
- { star: "5", name: "林尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lyney/image.png?strip=all&quality=100&w=140" },
- { star: "5", name: "迪希雅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dehya/image.png?strip=all&quality=100&w=140" },
- { star: "5", name: "迪卢克", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diluc/image.png?strip=all&quality=100&w=140" },
- { star: "5", name: "胡桃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/hu_tao/image.png?strip=all&quality=100&w=140", },
- { star: "5", name: "可莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/klee/image.png?strip=all&quality=100&w=140" },
- { star: "5", name: "宵宫", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yoimiya/image.png?strip=all&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"
- };
- function getElementColor(element) {
- return elementColors[element];
- }
- function getElementImage(element) {
- const foundElement = characters.find(e => e.element === element);
- return foundElement ? foundElement.elementImage : "";
- }
- function getCharacterImage(role) {
- for (const element of characters) {
- const foundRole = element.role.find(r => r.name === role);
- if (foundRole) {
- return foundRole.image;
- }
- }
- return "";
- }
- /* 原神元素颜色数据 结束*/
- /* 原神全部角色列表*/
- function loadData() {
- const table = document.querySelector('#character-table');
- let index = 1;
- let elementIndex = {};
- characters.forEach(element => {
- if (!elementIndex[element.element]) {
- elementIndex[element.element] = 1;
- }
- element.role.forEach(role => {
- const row = table.insertRow();
- row.insertCell().textContent = index++;
- const elementCell = row.insertCell();
- const elementColor = getElementColor(element.element);
- elementCell.innerHTML = `<span class="element-name" style="color: ${elementColor};">${element.element} (${elementIndex[element.element]++})</span><img src="${element.elementImage}" alt="${element.element}" class="element-image">`;
- const roleCell = row.insertCell();
- const roleColor = role.star === "5" ? "#ac7647" : "#846baa";
- roleCell.innerHTML = `<span class="character-name" style="color: ${roleColor};">${role.name}</span><img src="${role.image}" alt="${role.name}" class="character-image">`;
- const starCell = row.insertCell();
- const addCell134 = row.insertCell();
- addCell134.innerHTML = `<button onclick="addCharacter('1340', '${element.element}', '${role.name}', '${role.image}', '${role.star}')">培养</button><button class="addButton addButton134"></button>`;
- const addCell152 = row.insertCell();
- addCell152.innerHTML = `</button><button onclick="addCharacter('1520', '${element.element}', '${role.name}', '${role.image}', '${role.star}')">抽到</button><button class="addButton addButton152">`;
- starCell.textContent = role.star;
- row.style.backgroundColor = elementColor; // 设置背景颜色
- });
- });
- }
- loadData();
- /* 原神全部角色列表 结束*/
- /* 原神角色列表显示角色图片、元素图片*/
- const table = document.querySelector('#character-table');
- // 添加事件监听器
- table.addEventListener('mouseover', function (event) {
- const target = event.target;
- if (target.classList.contains('character-name')) {
- target.nextElementSibling.style.display = 'inline'; // 显示角色图片
- } else if (target.classList.contains('element-name')) {
- target.nextElementSibling.style.display = 'inline'; // 显示元素图片
- }
- });
- table.addEventListener('mouseout', function (event) {
- const target = event.target;
- if (target.classList.contains('character-name')) {
- target.nextElementSibling.style.display = 'none'; // 隐藏角色图片
- } else if (target.classList.contains('element-name')) {
- target.nextElementSibling.style.display = 'none'; // 隐藏元素图片
- }
- });
- /* 原神角色列表显示角色图片、元素图片 结束*/
- /* 添加角色功能*/
- function addCharacter(storageKey, element, role, image, star) {
- const data = JSON.parse(localStorage.getItem(storageKey)) || [];
- const elementData = data.find(e => e.element === element);
- if (elementData && elementData.characters.some(c => c.role === role)) {
- document.querySelector('.addButton134152').style.backgroundColor = '#ff0000';
- return;
- }
- if (!elementData) {
- data.push({
- element: element,
- characters: []
- });
- }
- const newCharacter = {
- role: role,
- image: image,
- star: star,
- level: 1,
- constellation: 0,
- talent: "1/1/1",
- note: "备注",
- selected: false
- };
- data.find(e => e.element === element).characters.push(newCharacter);
- localStorage.setItem(storageKey, JSON.stringify(data));
- renderTable(storageKey, storageKey === '1340' ? 'characterTable134' : 'characterTable152');
- initButtons(); // 更新按钮状态
- }
- /* 添加角色功能 结束*/
- /* 升级数据表*/
- function renderTable(storageKey, tableId) {
- const data = JSON.parse(localStorage.getItem(storageKey)) || [];
- const characterTable = document.getElementById(tableId);
- characterTable.innerHTML = `
- <caption>
- <a href="https://bbs.mihoyo.com/ys/strategy/channel/map/37/39?bbs_presentation_style=no_header&hide_nav=true&from=COLLECTION_BG" target="_blank">原神wiki角色攻略</a>
- <span>${tableId === 'characterTable134' ? '原神重点培养列表' : '原神抽到角色数据表'}</span>
- <a href="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&center=2008.50,-1084.00&zoom=-3.00" target="_blank">提瓦特大地图(mihoyo.com)</a>
- <button type="button" onclick="deleteSelectedRows('${storageKey}', '${tableId}')" style="float: right;color:#ff0000;cursor: pointer;">删除选中</button>
- </caption>
- <tr>
- <th>序号</th>
- <th>元素</th>
- <th>角色</th>
- <th>角色图片</th>
- <th style="display:none;">星级</th>
- <th>等级</th>
- <th>命座</th>
- <th style="width:100px;">天赋</th>
- <th style="width:400px;">备注</th>
- <th>选择</th>
- </tr>
- `;
- let row = 1;
- let lastElement = null;
- data.forEach((elementData, i) => elementData.characters.forEach((character, j) => {
- const newRow = characterTable.insertRow();
- newRow.insertCell().textContent = row++;
- if (elementData.element !== lastElement) {
- const elementCell = newRow.insertCell();
- elementCell.rowSpan = elementData.characters.length;
- const elementImage = document.createElement('img');
- elementImage.src = getElementImage(elementData.element);
- elementImage.style.width = '24px';
- elementImage.onerror = function () {
- elementCell.textContent = elementData.element;
- };
- elementImage.title = elementData.element; // 添加title属性显示元素名称
- elementCell.appendChild(elementImage);
- lastElement = elementData.element;
- }
- const roleCell = newRow.insertCell();
- roleCell.textContent = character.role;
- roleCell.style.color = character.star === "5" ? "#ac7647" : "#846baa";
- const characterImageCell = newRow.insertCell();
- const characterImage = document.createElement('img');
- characterImage.src = getCharacterImage(character.role);
- characterImage.style.width = '48px';
- characterImageCell.appendChild(characterImage);
- newRow.insertCell().style.display = 'none'; // 隐藏星级列
- newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'level', ${i}, ${j})">${character.level}</span>`;
- newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'constellation', ${i}, ${j})">${character.constellation}</span>`;
- newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'talent', ${i}, ${j})">${character.talent}</span>`;
- newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'note', ${i}, ${j})">${character.note}</span>`;
- newRow.style.backgroundColor = getElementColor(elementData.element);
- newRow.insertCell().innerHTML = `<input type="checkbox" ${character.selected ? 'checked' : ''} onchange="updateCheckboxStatus('${storageKey}', this, ${i}, ${j})">`;
- }));
- }
- /* 升级数据表 结束*/
- /* 编辑等级、命座、天赋、备注数据*/
- function editField(storageKey, field, elementIndex, characterIndex) {
- let data = JSON.parse(localStorage.getItem(storageKey)) || [];
- const newValue = prompt("请输入新的值:", data[elementIndex].characters[characterIndex][field]);
- if (newValue !== null) {
- data[elementIndex].characters[characterIndex][field] = newValue;
- localStorage.setItem(storageKey, JSON.stringify(data));
- renderTable(storageKey, storageKey === '1340' ? 'characterTable134' : 'characterTable152');
- }
- }
- /* 编辑等级、命座、天赋、备注数据 结束*/
- /* 删除功能*/
- function deleteSelectedRows(storageKey, tableId) {
- const data = JSON.parse(localStorage.getItem(storageKey)) || [];
- data.forEach(elementData => {
- elementData.characters = elementData.characters.filter(character => !character.selected);
- });
- localStorage.setItem(storageKey, JSON.stringify(data));
- renderTable(storageKey, tableId);
- initButtons(); // 重新初始化按钮状态
- }
- /* 删除功能 结束*/
- /* 复选框状态更新功能*/
- function updateCheckboxStatus(storageKey, checkbox, elementIndex, characterIndex) {
- const data = JSON.parse(localStorage.getItem(storageKey)) || [];
- data[elementIndex].characters[characterIndex].selected = checkbox.checked;
- localStorage.setItem(storageKey, JSON.stringify(data));
- }
- /* 复选框状态更新功能 结束*/
- /* 按钮切换功能*/
- function initButtons() {
- const table = document.querySelector('#character-table');
- const rows = table.rows;
- for (let i = 1; i < rows.length; i++) {
- const elementCell = rows[i].cells[1];
- const roleCell = rows[i].cells[2];
- const element = elementCell.querySelector('.element-name').textContent.split(' ')[0];
- const role = roleCell.querySelector('.character-name').textContent;
- const existingElement134 = JSON.parse(localStorage.getItem('1340'))?.find(e => e.element === element);
- const existingElement152 = JSON.parse(localStorage.getItem('1520'))?.find(e => e.element === element);
- const existingCharacter134 = existingElement134?.characters.find(c => c.role === role);
- const existingCharacter152 = existingElement152?.characters.find(c => c.role === role);
- if (existingCharacter134) {
- rows[i].cells[4].querySelector('button').style.display = 'none';
- rows[i].cells[4].querySelector('.addButton134').style.display = 'inline';
- } else {
- rows[i].cells[4].querySelector('button').style.display = 'inline';
- rows[i].cells[4].querySelector('.addButton134').style.display = 'none';
- }
- if (existingCharacter152) {
- rows[i].cells[5].querySelector('button').style.display = 'none';
- rows[i].cells[5].querySelector('.addButton152').style.display = 'inline';
- } else {
- rows[i].cells[5].querySelector('button').style.display = 'inline';
- rows[i].cells[5].querySelector('.addButton152').style.display = 'none';
- }
- }
- }
- /* 按钮切换功能 结束*/
- </script>
- </html>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |