原神4.8版本角色数据升级计划表

<!DOCTYPE html>
<html lang="en">
<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;
        /* 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);
            }
        }
    }
    #characterTableContainer {
        display: flex;
        margin-top: 5px;
        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;
            }
            .editable {
                /* 鼠标变小手 */
                cursor: pointer;
                &:hover {
                    background-color: #000000;
                    border-radius: 3px;
                    padding: 5px;
                    /* 添加过渡效果 */
                    transition: background-color 0.3s ease, padding 0.3s ease;
                }
            }
        }
        #countdownContainer {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            button {
                font-size: 1.5rem;
                color: hsl(0, 0%, 100%);
                text-shadow: 1px 1px 1px #100000;
                cursor: pointer;
                border-radius: 3px;
                background-color: #67c23a;
                border: none;
                margin: 5px;
                padding: 3px;
            }
            button:first-child {
                margin-top: 5px;
            }
            dialog {
                transform: translate(180%, 80%);
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                background-color: #f3f3f3;
            }
            dialog::backdrop {
                /* 模糊背景 */
                backdrop-filter: blur(2px);
            }
        }
        #character-table {
            .character-image,
            .element-image {
                /* 默认隐藏角色图片和元素图片 */
                display: none;
                position: absolute;
            }
        }
    }
</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="characterTableContainer">
        <div>
            <dialog id="dialogAddCharacter">
                <form id="addCharacterForm">
                    <label for="role">角色:</label>
                    <input type="text" id="role" name="role"> <button type="submit"
                        style="float: right;">关闭</button><br>
                    <button type="button" onclick="addCharacter()"
                        style="display: block; margin: 5px auto;">添加角色</button>
                </form>
            </dialog>
            <table id="characterTable"></table>
        </div>
        <div id="countdownContainer"></div>
        <div>
            <table id="character-table">
                <caption>
                    <span>原神4.8版本角色列表 </span>
                    <a href="https://genshin-builds.com/cn/characters" target="_blank">数据来源:(genshin-builds.com)</a>
                </caption>
                <tr>
                    <th>序号</th>
                    <th>元素</th>
                    <th>角色</th>
                    <th>星级</th>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    const current_time = document.getElementById("dateTime");
    function showTime() {
        const now = new Date();
        const time = `${now.getFullYear()}-${("0" + (now.getMonth() + 1)).slice(-2)}-${("0" + now.getDate()).slice(-2)}<sub id='sub'>${["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()]}</sub> ${("0" + now.getHours()).slice(-2)}:${("0" + now.getMinutes()).slice(-2)}:${("0" + now.getSeconds()).slice(-2)}`;
        current_time.innerHTML = time;
    }
    setInterval(showTime, 1000);
    function fullScreen() {
        const elem = document.documentElement;
        ['requestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen', 'msRequestFullscreen'].forEach(method => elem[method] && elem[method]());
    }
    function exitFullScreen() {
        ['exitFullscreen', 'mozCancelFullScreen', 'webkitExitFullscreen', 'msExitFullscreen'].forEach(method => document[method] && document[method]());
    }
    document.addEventListener("fullscreenchange", () => {
        document.fullscreenElement ? [fullScreenBtn.style.display = "none", exitFullScreenBtn.style.display = "block"] : [fullScreenBtn.style.display = "block", exitFullScreenBtn.style.display = "none"];
    });
    function closeAll() {
        window.close();
    }
    const countdownContainer = document.getElementById('countdownContainer');
    function createCountdownElement(id) {
        const button = document.createElement('button');
        button.textContent = `第${id}个倒计时`;
        button.id = `countdownElement${id}`;
        button.onclick = () => document.getElementById(`dialogCountdownElement${id}`).showModal();
        const dialog = document.createElement('dialog');
        dialog.id = `dialogCountdownElement${id}`;
        const form = document.createElement('form');
        form.method = 'dialog';
        const messageDiv = document.createElement('div');
        messageDiv.appendChild(document.createElement('label')).textContent = '更改提示信息:';
        messageDiv.appendChild(document.createElement('input')).type = 'text';
        messageDiv.lastChild.id = `message${id}`;
        messageDiv.lastChild.value = '距离2024年国庆节还有:';
        const targetDateDiv = document.createElement('div');
        targetDateDiv.appendChild(document.createElement('label')).textContent = '更改目标日期:';
        targetDateDiv.appendChild(document.createElement('input')).type = 'datetime-local';
        targetDateDiv.lastChild.id = `targetDate${id}`;
        form.appendChild(messageDiv);
        form.appendChild(targetDateDiv);
        form.appendChild(document.createElement('button')).type = 'submit';
        form.lastChild.textContent = '关闭';
        form.lastChild.style.display = 'block';
        form.lastChild.style.margin = '5px auto';
        dialog.appendChild(form);
        countdownContainer.appendChild(button);
        countdownContainer.appendChild(dialog);
    }
    for (let i = 1; i <= 4; i++) createCountdownElement(i);
    const countdownData = {
        1: { message: 'message1', targetDate: 'targetDate1' },
        2: { message: 'message2', targetDate: 'targetDate2' },
        3: { message: 'message3', targetDate: 'targetDate3' },
        4: { message: 'message4', targetDate: 'targetDate4' }
    };
    window.onload = () => Object.keys(countdownData).forEach(id => {
        const message = localStorage.getItem(countdownData[id].message);
        const targetDate = localStorage.getItem(countdownData[id].targetDate);
        if (message) document.getElementById(countdownData[id].message).value = message;
        if (targetDate) document.getElementById(countdownData[id].targetDate).value = targetDate;
    });
    function saveData(id) {
        const message = document.getElementById(countdownData[id].message).value;
        const targetDate = document.getElementById(countdownData[id].targetDate).value;
        localStorage.setItem(countdownData[id].message, message);
        localStorage.setItem(countdownData[id].targetDate, targetDate);
    }
    Object.keys(countdownData).forEach(id => {
        document.getElementById(countdownData[id].message).addEventListener('input', () => saveData(id));
        document.getElementById(countdownData[id].targetDate).addEventListener('input', () => saveData(id));
    });
    function showCountdown(id) {
        const message = document.getElementById(countdownData[id].message).value;
        const targetDateInput = document.getElementById(countdownData[id].targetDate);
        const targetDateValue = targetDateInput.value;
        const now = new Date();
        let targetDate = targetDateValue ? new Date(targetDateValue) : new Date(2024, 9, 1);
        const diff = targetDate - now;
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        document.getElementById(`countdownElement${id}`).innerHTML = `${message}${days}天${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }
    Object.keys(countdownData).forEach(id => {
        showCountdown(id);
        setInterval(() => showCountdown(id), 1000);
    });
    /* 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&amp;quality=100&amp;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&amp;quality=100&amp;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&amp;quality=100&amp;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&amp;quality=100&amp;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角色数据 结束*/
    let data = JSON.parse(localStorage.getItem('shinData')) || [];
    const characterTable = document.getElementById("characterTable");
    function renderTable() {
        characterTable.innerHTML = `
            <caption>
                <button type="button" onclick="dialogAddCharacter.show()" style="float: left;">添加角色</button>
                <a href="https://bbs.mihoyo.com/ys/strategy/channel/map/37/39?bbs_presentation_style=no_header&amp;hide_nav=true&amp;from=COLLECTION_BG" target="_blank">原神wiki角色攻略</a>
                <span>原神升级计划数据表</span>
                <a href="https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&amp;lang=zh-cn&amp;utm_source=bbs&amp;utm_medium=mys&amp;utm_campaign=pcicon&amp;_markerFps=24#/map/2?shown_types=NaN,-1084,508,2&amp;center=2008.50,-1084.00&amp;zoom=-3.00" target="_blank">提瓦特大地图(mihoyo.com)</a>
                <button type="button" onclick="deleteSelectedRows()" style="float: right;">删除选中</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('level', ${i}, ${j})">${character.level}</span>`;
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('constellation', ${i}, ${j})">${character.constellation}</span>`;
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('talent', ${i}, ${j})">${character.talent}</span>`;
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('note', ${i}, ${j})">${character.note}</span>`;
            newRow.style.backgroundColor = getElementColor(elementData.element);
            newRow.insertCell().innerHTML = `<input type="checkbox" ${character.selected ? 'checked' : ''} onchange="updateCheckboxStatus(this, ${i}, ${j})">`;
        }));
    }
    function getElementColor(element) {
        switch (element) {
            case "火": return "#FF9933"; // 火元素颜色
            case "水": return "#3399FF"; // 水元素颜色
            case "风": return "#66c6ac"; // 风元素颜色
            case "雷": return "#CC66FF"; // 雷元素颜色
            case "草": return "#66CC66"; // 草元素颜色
            case "冰": return "#99CCFF"; // 冰元素颜色
            case "岩": return "#FFCC33"; // 岩元素颜色
        }
    }
    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 "";
    }
    renderTable();
    function addCharacter() {
        const role = document.getElementById("role").value;
        if (!role) {
            alert("请填写角色名");
            return;
        }
        let element = "";
        let star = "";
        let found = false;
        characters.forEach(e => {
            e.role.forEach(r => {
                if (r.name === role) {
                    element = e.element;
                    star = r.star;
                    found = true;
                }
            });
        });
        if (!found) {
            alert("角色名不存在");
            return;
        }
        const newCharacter = {
            role,
            star,
            level: 1,
            constellation: 0,
            talent: "1/1/1",
            note: "说啥呢"
        };
        let elementExists = false;
        data.forEach(d => {
            if (d.element === element) {
                d.characters.push(newCharacter);
                elementExists = true;
            }
        });
        if (!elementExists) data.push({ element, characters: [newCharacter] });
        localStorage.setItem('shinData', JSON.stringify(data));
        renderTable();
        document.getElementById("role").value = "";
    }
    function updateCheckboxStatus(checkbox, elementIndex, characterIndex) {
        data[elementIndex].characters[characterIndex].selected = checkbox.checked;
        localStorage.setItem('shinData', JSON.stringify(data));
    }
    function deleteSelectedRows() {
        data = data.filter(elementData => {
            elementData.characters = elementData.characters.filter(character => !character.selected);
            return elementData.characters.length > 0;
        });
        localStorage.setItem('shinData', JSON.stringify(data));
        renderTable();
    }
    function editField(field, elementIndex, characterIndex) {
        const newValue = prompt("请输入新的值:", data[elementIndex].characters[characterIndex][field]);
        if (newValue !== null) {
            data[elementIndex].characters[characterIndex][field] = newValue;
            localStorage.setItem('shinData', JSON.stringify(data));
            renderTable();
        }
    }
    /*渲染原神角色数据表格*/
    // 获取表格元素
    const table = document.querySelector('#character-table');
    // 初始化序号
    let index = 1;
    let elementIndex = {};
    // 加载数据
    function loadData() {
        // 遍历角色数据并插入表格
        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();
                starCell.textContent = role.star;
                row.style.backgroundColor = elementColor; // 设置背景颜色
            });
        });
    }
    // 添加事件监听器
    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'; // 隐藏元素图片
        }
    });
    // 加载数据
    loadData();
</script>
</html>

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部