原神角色数据列表：添加了配对排序视觉，添加了移动按钮

最新推荐文章于 2024-10-04 06:11:34 发布
与妖为邻
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量480
点赞数 1
文章标签：原神升级计划数据表 html css3 前端 javascript
本文链接：https://blog.csdn.net/lulei5153/article/details/141715632
版权
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神角色数据列表</title>
    <!-- <link rel="stylesheet" href="file:///D:/data/原神/css/GenshinRoleTableContainer.css"> -->
</head>
<style>
      body {
                background: #0b1b2c;
            }
             /* 原神角色列表样式 */
   #GenshinRoleTableContainer {
       display: flex;

       table {
           border-collapse: collapse;
           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;
       }
    
   }

   /* 原神角色列表样式  结束*/
</style>
<body>
 
    <div id="GenshinRoleTableContainer">原神角色列表GenshinRoleTableContainer</div>
 
</body>

<!-- 原神角色列表数据genshin5_0_data -->
<script src="file:///D:/data/原神/js/genshin5_0_data.js"></script>

<script>
    
document.getElementById('GenshinRoleTableContainer').innerHTML = `
   
   <div>
       <!-- 原神版本全部角色列表 -->
       <table id="GenshinRoleTable"></table>
   </div>
   <div>
       <!-- 已有角色列表 -->
       <table id="haveGenshinRole"></table>
   </div>
   <div>
       <!-- 培养角色列表 -->
       <table id="cultivateGenshinRole"></table>
   </div>
   <div>
    </div>
   `;
 
 function getElementColor(element) {
     return elementColors[element];
 }
 
 function getElementImage(element) {
     const foundElement = GenshinRole.find(e => e.element === element);
     return foundElement ? foundElement.elementImage : "";
 }
 
 function getCharacterImage(role) {
     for (const element of GenshinRole) {
         const foundRole = element.role.find(r => r.name === role);
         if (foundRole) {
             return foundRole.image;
         }
     }
     return "";
 }
 let currentHaveGenshinRoleData = haveGenshinRole134;
 
 function isCharacterOwned(characterName, data) {
     for (const element of data) {
         if (element.role.some(role => role.name === characterName)) {
             return true;
         }
     }
     return false;
 }
 
 function renderGenshinRoleTable() {
     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>
         </caption>
         <tr>
             <th>序号</th>
             <th colspan="2">元素</th>
             <th colspan="2">角色</th>
             <th>获得</th>
         </tr>
     `;
 
     let row = 1;
     let lastElement = null;
 
     GenshinRole.forEach(elementData => {
         let elementIndex = 1;
         elementData.role.forEach(character => {
             const newRow = table.insertRow();
             newRow.insertCell().textContent = row++;
 
             if (elementData.element !== lastElement) {
                 const elementCell = newRow.insertCell();
                 elementCell.rowSpan = elementData.role.length;
                 const elementImage = document.createElement('img');
                 elementImage.src = getElementImage(elementData.element);
                 elementImage.style.width = '24px';
                 elementImage.onerror = () => elementCell.textContent = elementData.element;
                 elementImage.title = elementData.element;
                 elementCell.appendChild(elementImage);
                 lastElement = elementData.element;
             }
 
             newRow.insertCell().textContent = elementIndex++;
             const characterImageCell = newRow.insertCell();
             const characterImage = document.createElement('img');
             characterImage.src = getCharacterImage(character.name);
             characterImage.style.width = '48px';
             characterImage.style.transition = 'transform 0.25s'; // 添加过渡效果
             characterImage.addEventListener('mouseenter', function () {
                 this.style.transform = 'scale(3)'; // 放大图片
             });
             characterImage.addEventListener('mouseleave', function () {
                 this.style.transform = 'scale(1)'; // 恢复原状
             });
             characterImageCell.appendChild(characterImage);
 
             const roleCell = newRow.insertCell();
             roleCell.textContent = character.name;
             roleCell.style.color = character.star === "5" ? "#ac7647" : "#846baa";
 
             const addButtonCell = newRow.insertCell();
             const isOwned = isCharacterOwned(character.name, currentHaveGenshinRoleData);
             if (isOwned) {
                 const addButton2 = document.createElement('button');
                 addButton2.textContent = '';
                 addButton2.className = 'checkButton';
                 addButtonCell.appendChild(addButton2);
             } else {
                 const addButton1 = document.createElement('button');
                 addButton1.textContent = '没有';
                 addButtonCell.appendChild(addButton1);
             }
 
             newRow.style.backgroundColor = getElementColor(elementData.element);
         });
     });
 }
 
 renderGenshinRoleTable();
 /**************************************************************************************************/
 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 >角色</th>
                   <th class="hidden-star">星级</th>
                   <th>等级</th>
                   <th>命座</th>
                   <th style="width:70px;">天赋</th>
                   <th style="width:425px;">备注</th>
                    <th >移动</th>
               </tr>
               `;
     if (isAddButton) {
         const sortButton = document.createElement('button');
         sortButton.id = 'sortButton';
         sortButton.innerHTML = '品质排序';
         table.querySelector('caption b').insertAdjacentElement('afterend', sortButton);
         sortButton.addEventListener('click', () => {
             isSorted = !isSorted;
             sortTable(table, isSorted);
         });
         // 添加切换数据按钮
         const switchButton = document.createElement('button');
         switchButton.id = 'switchButton';
         switchButton.innerHTML = '切换数据';
         table.querySelector('caption b').insertAdjacentElement('afterend', switchButton);
         switchButton.addEventListener('click', () => {
             currentHaveGenshinRoleData = currentHaveGenshinRoleData === haveGenshinRole134 ? haveGenshinRole152 : haveGenshinRole134;
             currentCultivateGenshinRoleData = currentCultivateGenshinRoleData === cultivateGenshinRole134 ? cultivateGenshinRole152 : cultivateGenshinRole134;
             renderTable();
             renderGenshinRoleTable(); // 重新渲染GenshinRoleTable
         });
     }
     // 隐藏“备注”列
     if (captionText === "134获得角色数据" || captionText === "152获得角色数据") {
         table.querySelectorAll('th').forEach((th, index) => {
             if (index === 1) th.style.display = 'none';
             if (index === 7) th.style.display = 'none';
         });
     }
     // 创建弹窗元素
     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);
     table.querySelectorAll('.hidden-star').forEach(th => th.style.display = 'none');
 }
 
 /**
  * 渲染表格
  */
 function renderTable() {
     const haveGenshinRoleTable = document.getElementById("haveGenshinRole");
     initializeTable(haveGenshinRoleTable, currentHaveGenshinRoleData === haveGenshinRole134 ? "134获得角色数据" : "152获得角色数据", true);
     let row = 1;
     currentHaveGenshinRoleData.forEach((elementData) => { // 使用 currentHaveGenshinRoleData 数组
         elementData.role.forEach((character) => {
             addCharacterRow(haveGenshinRoleTable, character, elementData.element, row++);
         });
     });
     // 隐藏“备注”列的 td 元素
     if (haveGenshinRoleTable.querySelector('caption b').innerText === "134获得角色数据" || haveGenshinRoleTable.querySelector('caption b').innerText === "152获得角色数据") {
         haveGenshinRoleTable.querySelectorAll('td:nth-child(2)').forEach(td => td.style.display = 'none');
         haveGenshinRoleTable.querySelectorAll('td:nth-child(8)').forEach(td => td.style.display = 'none');
     }
     const cultivateGenshinRoleTable = document.getElementById("cultivateGenshinRole");
     initializeTable(cultivateGenshinRoleTable, currentCultivateGenshinRoleData === cultivateGenshinRole134 ? "134重点培养的角色" : "152重点培养的角色", false);
     row = 1;
     currentCultivateGenshinRoleData.forEach((characterName) => {
         const elementData = currentHaveGenshinRoleData.find(e => e.role.some(r => r.name === characterName));
         if (elementData) {
             const fullCharacterData = elementData.role.find(r => r.name === characterName);
             addCharacterRow(cultivateGenshinRoleTable, fullCharacterData, elementData.element, row++);
         }
     });
 }
 
 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, character, element, rowNumber, isCultivateList) {
     const newRow = table.insertRow();
     newRow.insertCell().textContent = rowNumber;
       // 插入新的序号单元格，并重新编号
       const newNumberCell = newRow.insertCell();
       newNumberCell.textContent = (rowNumber - 1) % 4 + 1;  // 重新编号从1到4
     // 插入角色名称的单元格
     const roleCell = newRow.insertCell();
     roleCell.textContent = character.name;
     const isCultivateRole = currentCultivateGenshinRoleData.includes(character.name);  // 使用 currentCultivateGenshinRoleData 数组
     if (isCultivateRole && table.id === "haveGenshinRole") {
         const cultivateButton = document.createElement('button');
         cultivateButton.className = 'cultivate';
         roleCell.appendChild(cultivateButton);
     }
     const star = getStar(character.name, element);
     roleCell.style.color = star === "5" ? "#ac7647" : "#846baa";
     const starCell = newRow.insertCell();
     starCell.textContent = star;
     starCell.style.display = 'none';
     newRow.insertCell().innerHTML = `<span >${character.level}</span>`;
     newRow.insertCell().innerHTML = `<span >${character.constellation}</span>`;
     newRow.insertCell().innerHTML = `<span >${character.talent}</span>`;
     const noteCell = newRow.insertCell();
     noteCell.innerHTML = `<span >${character.note}</span>`;
     // 检查 introductionLinks 数组中是否包含该角色名称
     const hasIntroductionLinks = introductionLinks.some(link => link.name.includes(character.name));
     if (hasIntroductionLinks) {
         // 添加“攻略”按钮
         const strategyButton = document.createElement('button');
         strategyButton.textContent = '攻略';
 
         strategyButton.addEventListener('click', (event) => showIntroductionLinks(character.name, event));  // 修改为点击事件
         noteCell.appendChild(strategyButton);
     }
   
     newRow.style.backgroundColor = getElementColor(element);
     // 添加新的单元格，包含向上和向下移动的按钮
     const moveCell = newRow.insertCell();
     moveCell.innerHTML = `<button onclick="upMess(this)">↑</button><button onclick="downMess(this)">↓</button>`;
 
     // 检查当前行是否为第4行，并且是重点培养列表
     if (table.id === "cultivateGenshinRole" && rowNumber % 4 === 0) {
         newRow.style.borderBottom = '5px solid #ff0000';
     }
 }
 function upMess(button) {
     const row = button.parentNode.parentNode;
     const previousRow = row.previousElementSibling;
     if (previousRow && previousRow.tagName === 'TR' && previousRow.children[0].tagName !== 'TH') {
         row.parentNode.insertBefore(row, previousRow);
         recalculateSequenceNumbers(row.parentNode);
         saveTableDataToLocalStorage(row.parentNode);
     } else {
         alert('移动失败，数据无法再向上移动！');
     }
 }
 
 function downMess(button) {
     const row = button.parentNode.parentNode;
     const nextRow = row.nextElementSibling;
     if (nextRow && nextRow.tagName === 'TR' && nextRow.children[0].tagName !== 'TH') {
         row.parentNode.insertBefore(nextRow, row);
         recalculateSequenceNumbers(row.parentNode);
         saveTableDataToLocalStorage(row.parentNode);
     } else {
         alert('移动失败，数据无法再向下移动！');
     }
 }
 
 function recalculateSequenceNumbers(table) {
     const rows = Array.from(table.rows).filter(row => row.children[0].tagName !== 'TH');
     rows.forEach((row, index) => {
         const newNumberCell = row.children[1];
         newNumberCell.textContent = (index % 4) + 1;
         if ((index + 1) % 4 === 0) {
             row.style.borderBottom = '5px solid #ff0000';
         } else {
             row.style.borderBottom = '';
         }
         // 重新计算第一列的序号
         const firstColumnCell = row.children[0];
         firstColumnCell.textContent = index + 1;
     });
 }
 /**************************************************************************************************/
 function sortTable(table, isSorted) {
     // 将表格的行转换为数组并去掉表头行
     const rows = Array.from(table.rows).slice(1);
     if (isSorted) {
         // 如果表格已经排序，按照特定规则重新排序
         rows.sort((a, b) => {
             const starA = a.cells[3].textContent; // 获取第一行的星级
             const starB = b.cells[3].textContent; // 获取第二行的星级
             const constellationA = parseInt(a.cells[5].textContent, 10); // 获取第一行的星座值并转换为整数
             const constellationB = parseInt(b.cells[5].textContent, 10); // 获取第二行的星座值并转换为整数
             if (starA === "5" && starB !== "5") {
                 return -1; // 如果第一行的星级是5且第二行的星级不是5，第一行排在前面
             } else if (starA !== "5" && starB === "5") {
                 return 1; // 如果第一行的星级不是5且第二行的星级是5，第二行排在前面
             } else {
                 return constellationB - constellationA; // 否则按照星座值从大到小排序
             }
         });
     } else {
         // 如果表格未排序，按照索引值从小到大排序
         rows.sort((a, b) => {
             const indexA = parseInt(a.cells[0].textContent, 10); // 获取第一行的索引值并转换为整数
             const indexB = parseInt(b.cells[0].textContent, 10); // 获取第二行的索引值并转换为整数
             return indexA - indexB; // 按照索引值从小到大排序
         });
     }
     // 删除表格中除表头外的所有行
     while (table.rows.length > 1) {
         table.deleteRow(1);
     }
     // 将排序后的行重新添加到表格中，并根据条件设置背景颜色
     rows.forEach(row => {
         table.appendChild(row); // 将行添加到表格中
         const star = row.cells[3].textContent; // 获取行的星级
         const constellation = parseInt(row.cells[5].textContent, 10); // 获取行的星座值并转换为整数
         if (isSorted) {
             if (star === "5" || constellation === 6) {
                 // 如果星级是5或者星座值是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";
                 row.cells[6].style.backgroundColor = star === "5" ? "#ac7647" : "#846baa";
             } else {
                 // 否则，调用 getElementColor 函数设置背景颜色
                 const element = row.cells[1].textContent; // 假设元素信息存储在角色名称单元格中
                 // row.cells[1].style.backgroundColor = getElementColor(element);
                 row.cells[2].style.backgroundColor = getElementColor(element);
                 row.cells[3].style.backgroundColor = getElementColor(element);
                 row.cells[4].style.backgroundColor = getElementColor(element);
                 row.cells[5].style.backgroundColor = getElementColor(element);
                 row.cells[6].style.backgroundColor = getElementColor(element);
             }
         } else {
             // 恢复到 elementColors 对象中对应 element 键的值
             const element = row.cells[1].textContent; // 假设元素信息存储在角色名称单元格中
             // row.cells[1].style.backgroundColor = elementColors[element] || '';
             row.cells[2].style.backgroundColor = elementColors[element] || ''; // 使用 elementColors 对象中的颜色
             row.cells[3].style.backgroundColor = elementColors[element] || '';
             row.cells[4].style.backgroundColor = elementColors[element] || '';
             row.cells[5].style.backgroundColor = elementColors[element] || '';
             row.cells[6].style.backgroundColor = elementColors[element] || '';
         }
     });
 }
 
 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';
     // 创建关闭按钮
     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);
     document.body.appendChild(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;
 }
 
 renderTable();
</script>


</html>