本文主要是介绍原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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);}}}/* 头部样式 结束 *//* 添加倒计时样式 */#countdownContainer {width: 99vw;height: 40px;display: flex;justify-content: space-between;position: fixed;transform: translate(0%, 101%);background-color: #cbcbcb;button {cursor: pointer;padding: 5px;}#addCountdown {transform: translate(120%, 30%);border-radius: 5px;color: #daff06;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;ul {list-style: none;display: flex;flex-direction: column;justify-content: center;align-items: center;}}}.buttonContainer {width: 47px;display: flex;justify-content: space-between;/* 添加按钮 */.addCountdownButton {width: 47px;}}/* 倒计时 */#countdowns {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;div {&:hover {background-color: #e6a23c;cursor: pointer;}input {display: none;}strong {cursor: pointer;text-shadow: 2px 2px 2px #fffdfd;}span {cursor: pointer;display: inline-block;color: #fff;text-shadow: 1px 1px 1px #000;font-size: 1.8rem;&:hover {color: #ef0505;}}}}}/* 添加倒计时样式 结束*//* 主要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;}}/* 原神抽到角色数据表 *//* #characterTable152 {input[type='checkbox'] {display: none;} td:nth-child(2),td:nth-child(7),td:nth-child(8),td:nth-child(9) {display: none;} } */}}/* 主要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 id="countdownContainer"></div><!-- 添加倒计时 结束 --><!-- 主要表格 --><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><!-- 主要表格 结束 -->
</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) { // Firefoxelem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Operaelem.webkitRequestFullscreen();} else if (elem.msRequestFullscreen) { // IE/Edgeelem.msRequestFullscreen();}}function exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) { // Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // Chrome, Safari and Operadocument.webkitExitFullscreen();} else if (document.msExitFullscreen) { // IE/Edgedocument.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();}// 全屏功能与关闭 结束/* 添加倒计时函数*/// 创建倒计时容器的HTML内容const countdownContainer = document.getElementById('countdownContainer');countdownContainer.innerHTML = `<div id="countdowns"><!--动态倒计时区 --></div><!-- 按钮区 --><div class="buttonContainer"><button onclick="showAddCountdown()" style="color: #67c23a;" class="addCountdownButton">添加</button><button class="edit" onclick="editSelected()" style="display: none;color: #e6a23c;">改</button><button class="delete" onclick="deleteSelected()" style="display: none;color: red;">删</button></div><dialog id="addCountdown"><div><form><button id="cancelAdd" type="submit">取消添加</button><br><input type="text" id="promptInput" placeholder="提示信息"><br><input type="datetime-local" id="datetimeInput"><button id="saveButton" onclick="saveCountdown()">保存</button></form><p>主要节日时间表</p><ul><li>星尘兑换纠缠之缘重置时间:2024年09月01日04点00分</li><li>幻想真境剧诗重置时间:2024年09月01日04点00分</li><li>渊月螺旋重置时间:2024年09月16日04点00分</li><li>4.8版本下半场限时祈愿结束:2024年08月27日15点00分</li><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>`;let colorIndex = 0; // 初始化颜色索引function getRandomColor() {const elements = Object.keys(elementColors); // 获取所有元素名称（原神元素颜色数据)colorIndex = (colorIndex + 1) % elements.length; // 递增索引，并在达到数组长度时重置为0return elementColors[elements[colorIndex]]; // 返回该元素对应的颜色}// 保存倒计时函数function saveCountdown() {const promptInput = document.getElementById('promptInput').value.trim();const datetimeInput = document.getElementById('datetimeInput').value;if (promptInput && datetimeInput) {const countdownDiv = document.getElementById('countdowns');const timestamp = Date.now();const checkboxId = `checkbox_${timestamp}`; // 生成唯一的 checkbox idconst countdownElement = document.createElement('div');countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色countdownElement.innerHTML = `<input type="checkbox" class="countdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${promptInput}</strong>:<span id="countdown_${timestamp}"></span></label>`;countdownDiv.appendChild(countdownElement);updateCountdown(`countdown_${timestamp}`, new Date(datetimeInput));// 存储倒计时信息到 localStoragelocalStorage.setItem(`countdown_${timestamp}`, JSON.stringify({prompt: promptInput,datetime: datetimeInput}));} else {alert('请填写提示信息和目标日期');}}// 页面加载时从 localStorage 中恢复倒计时window.onload = function () {for (let i = 0; i < localStorage.length; i++) {const key = localStorage.key(i);if (key.startsWith('countdown_')) {const data = JSON.parse(localStorage.getItem(key));const timestamp = key.split('_')[1];const countdownDiv = document.getElementById('countdowns');const checkboxId = `checkbox_${timestamp}`; // 生成唯一的 checkbox idconst countdownElement = document.createElement('div');countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色countdownElement.innerHTML = `<input type="checkbox" class="countdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="countdown_${timestamp}"></span></label>`;countdownDiv.appendChild(countdownElement);updateCountdown(`countdown_${timestamp}`, new Date(data.datetime));}}};// 更新倒计时函数function updateCountdown(elementId, targetDate) {const countdownElement = document.getElementById(elementId);function 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;}function padZero(num) {return num < 10 ? `0${num}` : num;}update();setInterval(update, 1000);}// 监听复选框状态变化document.addEventListener('change', function (event) {const checkboxes = document.querySelectorAll('.countdownCheckbox');const editButton = document.querySelector('.edit');const deleteButton = document.querySelector('.delete');const addCountdownButton = document.querySelector('.addCountdownButton');checkboxes.forEach(checkbox => {const countdownElement = checkbox.parentNode;if (checkbox.checked) {countdownElement.style.backgroundColor = '#f56c6c'; // 选中时改变背景颜色countdownElement.style.color = '#f56c6c';/*点击span标签时，将span标签的颜色改为红色// 获取所有的 span 元素var spans = document.querySelectorAll('span');// 遍历每个 span 元素并添加点击事件监听器spans.forEach(function(span) {span.addEventListener('click', function() {// 将点击的 span 元素的文本颜色改为红色this.style.color = 'red';});});*/} else {countdownElement.style.backgroundColor = '';countdownElement.style.color = ''; // 未选中时恢复默认背景颜色}});const checkedCheckboxes = document.querySelectorAll('.countdownCheckbox:checked');if (checkedCheckboxes.length > 0) {editButton.style.display = 'inline-block';deleteButton.style.display = 'inline-block';addCountdownButton.style.display = 'none'; // 隐藏添加倒计时按钮} else {editButton.style.display = 'none';deleteButton.style.display = 'none';addCountdownButton.style.display = 'inline-block'; // 显示添加倒计时按钮}});// 删除选中的倒计时function deleteSelected() {const confirmDelete = confirm("确定要删除选中的倒计时吗？");if (confirmDelete) {const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');checkboxes.forEach(checkbox => {const timestamp = checkbox.value;localStorage.removeItem(`countdown_${timestamp}`);checkbox.parentNode.remove();});// 重置所有复选框状态document.querySelectorAll('.countdownCheckbox').forEach(checkbox => {checkbox.checked = false;});// 隐藏编辑和删除按钮，显示添加按钮document.querySelector('.edit').style.display = 'none';document.querySelector('.delete').style.display = 'none';document.querySelector('.addCountdownButton').style.display = 'inline-block';}}// 编辑选中的倒计时function editSelected() {const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');if (checkboxes.length === 0) return;checkboxes.forEach(checkbox => {const timestamp = checkbox.value;const data = JSON.parse(localStorage.getItem(`countdown_${timestamp}`));if (data) { // 检查数据是否存在const newPrompt = prompt('请输入新的提示信息', data.prompt);const newDatetime = prompt('目标日期(YYYY-MM-DDTHH:MM,例如:2024-10-01T04:00 2024-10-01 00:00)', data.datetime);if (newPrompt && newDatetime) {localStorage.setItem(`countdown_${timestamp}`, JSON.stringify({prompt: newPrompt,datetime: newDatetime}));const checkboxId = `checkbox_${timestamp}`; // 生成唯一的 checkbox idconst countdownElement = document.getElementById(`countdown_${timestamp}`).parentNode;countdownElement.innerHTML = `<input type="checkbox" class="countdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${newPrompt}</strong>: <span id="countdown_${timestamp}"></span></label>`;updateCountdown(`countdown_${timestamp}`, new Date(newDatetime));}} else {console.error(`Countdown data for timestamp ${timestamp} not found in localStorage.`);}});// 重置所有复选框状态document.querySelectorAll('.countdownCheckbox').forEach(checkbox => {checkbox.checked = false;});// 隐藏编辑和删除按钮，显示添加按钮document.querySelector('.edit').style.display = 'none';document.querySelector('.delete').style.display = 'none';document.querySelector('.addCountdownButton').style.display = 'inline-block';}// 显示添加倒计时对话框function showAddCountdown() {document.getElementById('addCountdown').showModal();}/* 添加倒计时函数*//* 原神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>${tableId !== 'characterTable152' ? `<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;${tableId === 'characterTable152' ? 'display:none;' : ''}">备注</th><th${tableId === 'characterTable152' ? ' style="display:none;"' : ''}>选择</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})"${tableId === 'characterTable152' ? ' style="display:none;"' : ''}>${character.note}</span>`;newRow.style.backgroundColor = getElementColor(elementData.element);newRow.insertCell().innerHTML = `<input type="checkbox" ${character.selected ? 'checked' : ''} onchange="updateCheckboxStatus('${storageKey}', this, ${i}, ${j})"${tableId === 'characterTable152' ? ' style="display:none;"' : ''}>`;}));}/* 升级数据表 结束*//* 编辑等级、命座、天赋、备注数据*/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));// 获取另一个表格的 storageKeyconst otherStorageKey = storageKey === '1340' ? '1520' : '1340';let otherData = JSON.parse(localStorage.getItem(otherStorageKey)) || [];// 找到对应的角色并更新数据const elementData = otherData.find(e => e.element === data[elementIndex].element);if (elementData) {const characterData = elementData.characters.find(c => c.role === data[elementIndex].characters[characterIndex].role);if (characterData) {characterData[field] = newValue;localStorage.setItem(otherStorageKey, JSON.stringify(otherData));}}// 重新渲染两个表格renderTable('1340', 'characterTable134');renderTable('1520', '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>
这篇关于原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
![C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量](https://i-blog.csdnimg.cn/direct/cda2638386c64e8d80479ab11fcb14a9.png)
