原神升级计划数据表：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>
相关推荐
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒3 小时前
WEB第二次作业
前端·css·html
Qhumaing4 小时前
html第一个网页
网络·html·html5
荆州克莱5 小时前
[FE] React 初窥门径（四）：React 组件的加载过程（render 阶段）
spring boot·spring·spring cloud·css3·技术
前端Hardy8 小时前
HTML&CSS：爱上班的猫咪
前端·javascript·css·vue.js·html
聚宝盆_10 小时前
【css flex 多行均分有间隙布局】
前端·css
零希11 小时前
CSS元素类型（二）
前端·javascript·css
煎饼果子呀11 小时前
css-flex布局属性
开发语言·前端·css·html5
沈阳-施立11 小时前
CSS例子: 胶囊按钮
前端·css
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05红米手机使用google play06【经验分享】Ubuntu22.04安装微信(linux官方版)07全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测