原神升级计划数据表：4个倒计时可以修改提示信息和时间，可以点击等级、命座、天赋、备注进行修改。

与妖为邻2024-08-09 18:42

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>原神倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            body {
                background: #0b1b2c;
            }
        }

        header {
            width: 100vw;
            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%);
                }

                .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%);
                }

                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);
                }
            }
        }

        main {
            display: flex;
            flex-direction: column;
            align-items: center;

            #countdownContainer {
                display: flex;
                flex-direction: column;
                align-items: center;

                button {
                    font-size: 1.5rem;
                    color: hsla(160, 100%, 37%, 0.63);
                    text-shadow: 1px 1px 1px #100000;
                    cursor: pointer;
                    border-radius: 3px;
                    /* background-color: #f30303; */
                    border: none;
                    margin: 5px;
                    padding: 3px;
                }

                dialog {
                    transform: translate(180%, 80%);
                    padding: 10px;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                    background-color: #f3f3f3;
                }

                dialog::backdrop {
                    /* 模糊背景 */
                    backdrop-filter: blur(2px);
                }
            }

            table {
                border-collapse: collapse;

                th,
                td {
                    text-align: center;
                    padding: 8px;
                    border: 1px solid #ddd;
                }

                th {
                    background-color: #9f9e9e;
                }

                td {
                    color: hsl(0, 0%, 100%);
                    text-shadow: 1px 1px 1px #030303;
                }
            }
        }

        #dialogAddCharacter {
            transform: translate(180%, 80%);
            transform: translate(180%, 80%);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f3f3f3;
        }
    </style>
</head>

<body>
    <header>
        <!-- logo -->
        <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>
    <main>
        <div id="countdownContainer"></div>
        <div>
            <button type="button" onclick="dialogAddCharacter.show() ">添加角色</button>
            <dialog id="dialogAddCharacter">
                <form id="addCharacterForm">
                    <label for="element">元素:</label>
                    <select id="element" name="element">
                        <option value="火">火</option>
                        <option value="水">水</option>
                        <option value="风">风</option>
                        <option value="雷">雷</option>
                        <option value="草">草</option>
                        <option value="冰">冰</option>
                        <option value="岩">岩</option>
                    </select><br><br>
                    <label for="role">角色:</label>
                    <input type="text" id="role" name="role"><br><br>
                    <label for="level">等级:</label>
                    <input type="number" id="level" name="level"><br><br>
                    <label for="constellation">命座:</label>
                    <select id="constellation" name="constellation">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                    </select><br><br>
                    <label for="talent">天赋:</label>
                    <input type="text" id="talent" name="talent"><br><br>
                    <label for="note">备注:</label>
                    <input type="text" id="note" name="note"><br><br>
                    <button type="button" onclick="addCharacter() ">添加角色</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="submit">关闭</button>
                </form>
            </dialog>
            <button type="button" onclick="deleteSelectedRows()">删除选中</button>
            <div id="countdownContainer"></div>
            <table id="characterTable"> </table>
        </div>
    </main>
</body>
<script>
    /* 现在时间*/
    var current_time = document.getElementById("dateTime");
    function showTime() {
        var now = new Date();
        var year = now.getFullYear();
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        var day = ("0" + now.getDate()).slice(-2);
        var hour = ("0" + now.getHours()).slice(-2);
        var min = ("0" + now.getMinutes()).slice(-2);
        var second = ("0" + now.getSeconds()).slice(-2);
        var week = [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
        ][now.getDay()];
        var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
        current_time.innerHTML = time;
    }
    showTime();
    setInterval(showTime, 1000);
    /* 现在时间 结束*/
    /* 全屏功能与关闭*/
    function fullScreen() {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { // Firefox
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { // IE/Edge
            elem.msRequestFullscreen();
        }
    }
    function exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
            document.msExitFullscreen();
        }
    }
    // 获取全屏和还原按钮
    var fullScreenBtn = document.querySelector(".fullScreen");
    var exitFullScreenBtn = document.querySelector(".exitFullScreen");
    // 监听全屏和还原事件
    document.addEventListener("fullscreenchange", function () {
        if (document.fullscreenElement) {
            fullScreenBtn.style.display = "none";
            exitFullScreenBtn.style.display = "block";
        } else {
            fullScreenBtn.style.display = "block";
            exitFullScreenBtn.style.display = "none";
        }
    });
    // 关闭当前窗口
    function closeAll() {
        window.close();
    }
    /* 全屏功能与关闭 结束*/
    /* 倒计时功能渲染*/
    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');
        const messageLabel = document.createElement('label');
        messageLabel.textContent = '更改提示信息：';
        messageLabel.htmlFor = `message${id}`;
        const messageInput = document.createElement('input');
        messageInput.type = 'text';
        messageInput.id = `message${id}`;
        messageInput.value = '距离2024年国庆节还有：';
        messageDiv.appendChild(messageLabel);
        messageDiv.appendChild(messageInput);
        const targetDateDiv = document.createElement('div');
        const targetDateLabel = document.createElement('label');
        targetDateLabel.textContent = '更改目标日期：';
        targetDateLabel.htmlFor = `targetDate${id}`;
        const targetDateInput = document.createElement('input');
        targetDateInput.type = 'datetime-local';
        targetDateInput.id = `targetDate${id}`;
        targetDateDiv.appendChild(targetDateLabel);
        targetDateDiv.appendChild(targetDateInput);
        const closeButton = document.createElement('button');
        closeButton.type = 'submit';
        closeButton.textContent = '关闭';
        closeButton.style.display = 'block';
        closeButton.style.margin = '5px auto';
        form.appendChild(messageDiv);
        form.appendChild(targetDateDiv);
        form.appendChild(closeButton);
        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' }
    };
    // 加载时从localStorage读取数据
    window.onload = function () {
        for (let id in countdownData) {
            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;
            }
        }
    };
    // 保存数据到localStorage
    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);
    }
    // 监听输入框的变化并保存数据
    for (let id in countdownData) {
        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;
        if (targetDateValue) {
            targetDate = new Date(targetDateValue);
        } else {
            targetDate = new Date(2024, 9, 1); // 默认值：2024年10月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);
        const countdownElement = document.getElementById(`countdownElement${id}`);
        countdownElement.innerHTML = `${message}${days}天${hours}小时${minutes}分${seconds}秒`;
    }
    for (let id in countdownData) {
        showCountdown(id);
        setInterval(() => showCountdown(id), 1000);
    }
    /* 倒计时功能实现 结束*/
    /*原神数据存储与渲染*/
    // 从 localStorage 中读取数据
    let data = JSON.parse(localStorage.getItem('genshinData')) || [];
    // 获取页面上的表格元素
    const characterTable = document.getElementById("characterTable");
    // 渲染表格
    function renderTable() {
        characterTable.innerHTML = `
    <tr>
        <th>选择</th>
        <th>序号</th>
        <th>元素</th>
        <th>角色</th>
        <th>等级</th>
        <th>命座</th>
        <th>天赋</th>
        <th>备注</th>
    </tr>
`;
        let row = 1;
        let lastElement = null;
        for (let i = 0; i < data.length; i++) {
            const elementData = data[i];
            for (let j = 0; j < elementData.characters.length; j++) {
                const character = elementData.characters[j];
                const newRow = characterTable.insertRow();
                newRow.insertCell().innerHTML = `<input type="checkbox" ${character.selected ? 'checked' : ''} onchange="updateCheckboxStatus(this, ${i}, ${j})">`; // 添加复选框并根据数据选中
                newRow.insertCell().textContent = row++;
                if (elementData.element !== lastElement) {
                    const elementCell = newRow.insertCell();
                    elementCell.rowSpan = elementData.characters.length;
                    elementCell.textContent = elementData.element;
                    lastElement = elementData.element;
                }
                newRow.insertCell().textContent = character.role;
                newRow.insertCell().innerHTML = `<span onclick="editField('level', ${i}, ${j})">${character.level}</span>`;
                newRow.insertCell().innerHTML = `<span onclick="editField('constellation', ${i}, ${j})">${character.constellation}</span>`;
                newRow.insertCell().innerHTML = `<span onclick="editField('talent', ${i}, ${j})">${character.talent}</span>`;
                newRow.insertCell().innerHTML = `<span onclick="editField('note', ${i}, ${j})">${character.note}</span>`;
                newRow.style.backgroundColor = getElementColor(elementData.element);
            }
        }
    }
    // 获取元素颜色
    function getElementColor(element) {
        switch (element) {
            case "火": return "#FF0000"; // 红色
            case "水": return "#0000FF"; // 蓝色
            case "风": return "#00FFFF"; // 青色
            case "雷": return "#800080"; // 紫色
            case "草": return "#008000"; // 深绿色
            case "冰": return "#ADD8E6"; // 浅蓝色
            case "岩": return "#FFFF00"; // 黄色
            default: return "#FFFFFF"; // 默认白色
        }
    }
    // 初始渲染表格
    renderTable();
    function addCharacter() {
        const element = document.getElementById("element").value;
        const role = document.getElementById("role").value;
        const level = document.getElementById("level").value;
        const constellation = document.getElementById("constellation").value;
        const talent = document.getElementById("talent").value;
        const note = document.getElementById("note").value;
        if (!element || !role || !level || !constellation || !talent || !note) {
            alert("请填写所有字段");
            return;
        }
        const newCharacter = {
            role: role,
            level: parseInt(level),
            constellation: constellation,
            talent: talent,
            note: note
        };
        let elementExists = false;
        for (let i = 0; i < data.length; i++) {
            if (data[i].element === element) {
                data[i].characters.push(newCharacter);
                elementExists = true;
                break;
            }
        }
        if (!elementExists) {
            data.push({
                element: element,
                characters: [newCharacter]
            });
        }
        // 保存数据到 localStorage
        localStorage.setItem('genshinData', JSON.stringify(data));
        // 重新渲染表格
        renderTable();
        // 清空表单
        document.getElementById("element").value = "";
        document.getElementById("role").value = "";
        document.getElementById("level").value = "";
        document.getElementById("constellation").value = "";
        document.getElementById("talent").value = "";
        document.getElementById("note").value = "";
    }
    function updateCheckboxStatus(checkbox, elementIndex, characterIndex) {
        data[elementIndex].characters[characterIndex].selected = checkbox.checked;
        localStorage.setItem('genshinData', JSON.stringify(data));
    }
    function deleteSelectedRows() {
        for (let i = data.length - 1; i >= 0; i--) {
            for (let j = data[i].characters.length - 1; j >= 0; j--) {
                if (data[i].characters[j].selected) {
                    data[i].characters.splice(j, 1);
                }
            }
            if (data[i].characters.length === 0) {
                data.splice(i, 1);
            }
        }
        // 保存数据到 localStorage
        localStorage.setItem('genshinData', 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('genshinData', JSON.stringify(data));
            renderTable();
        }
    }
    /*原神数据存储与渲染 结束*/
</script>

</html>
相关推荐
NightCyberpunk40 分钟前
HTML、CSS
前端·css·html
啵咿傲4 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy4 小时前
HTML&CSS：数据卡片可以这样设计
前端·javascript·css·3d·html
流烟默4 小时前
CSS中Flex布局应用实践总结
前端·css·flex布局
大G哥6 小时前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
xiyusec7 小时前
HTML基础
前端·html
好开心337 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
前端熊猫10 小时前
transform学习
前端·学习·html
郑祎亦10 小时前
JavaWeb开发：HTML 页面与接口对接
前端·后端·java-ee·html
Au_ust11 小时前
css:感觉稍微高级一点的布局
前端·css
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库0704 - matlab m_map地学绘图工具基础函数 - 设置网格08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿