devbox
小惠珠哦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

原神自定义倒计时

作者：小惠珠哦 | 2024-08-05 11:52:27

赞

踩

原神自定义倒计时

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>原神倒计时</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.             user-select: none;
  13.  
  14.             body {
  15.                 background: #0b1b2c;
  16.             }
  17.         }
  18.  
  19.         header {
  20.             width: 100vw;
  21.             height: 40px;
  22.             display: flex;
  23.             justify-content: space-between;
  24.             align-items: center;
  25.             background-color: #cbcbcb;
  26.  
  27.             /* logo */
  28.             figure.logo {
  29.                 width: 262px;
  30.                 height: 50px;
  31.                 /* 缩小 */
  32.                 transform: scale(0.8);
  33.                 margin-top: 2px;
  34.                 margin-left: -15px;
  35.                 border-radius: 50%;
  36.                 background: #f30303;
  37.                 box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
  38.                     inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  39.                 z-index: 99;
  40.  
  41.                 figcaption {
  42.                     background: hsl(0, 0%, 0%);
  43.                     background-clip: text;
  44.                     -webkit-background-clip: text;
  45.                     -webkit-text-fill-color: transparent;
  46.                     font-weight: bold;
  47.                     box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  48.                     letter-spacing: -3px;
  49.                     line-height: 45px;
  50.                     border-radius: 50%;
  51.                     font-size: 40px;
  52.                     width: 152px;
  53.                 }
  54.  
  55.                 .my_name1 {
  56.                     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
  57.                     clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  58.                     transform: translate(35%, 0%);
  59.                 }
  60.  
  61.                 .my_name2 {
  62.                     text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
  63.                     clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  64.                     transform: translate(35%, -93%);
  65.                 }
  66.  
  67.                 img {
  68.                     width: 60px;
  69.                     height: 35px;
  70.                     border-radius: 50%;
  71.                     transition: transform 0.3s ease;
  72.                     position: absolute;
  73.  
  74.                     &:hover {
  75.                         transform: scale(1.3);
  76.                         filter: drop-shadow(0 0 0.3em #ff0202);
  77.                     }
  78.                 }
  79.  
  80.                 .kong {
  81.                     margin-top: 7px;
  82.                     margin-left: 200px;
  83.                 }
  84.  
  85.                 .ying {
  86.                     top: 7px;
  87.                     margin-left: 2px;
  88.                 }
  89.             }
  90.  
  91.             /* 时间 */
  92.             time {
  93.                 background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
  94.                 background-clip: text;
  95.                 -webkit-background-clip: text;
  96.                 -webkit-text-fill-color: transparent;
  97.                 font-size: 1.5rem;
  98.                 font-weight: 900;
  99.                 text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
  100.  
  101.                 sub {
  102.                     -webkit-text-fill-color: #cfd601;
  103.                     text-shadow: 1px 1px 1px #100000;
  104.                     font-size: 1rem;
  105.                 }
  106.             }
  107.  
  108.             /* 全屏还原关闭按钮 */
  109.             menu {
  110.                 display: flex;
  111.  
  112.                 button {
  113.                     background: none;
  114.                     border: none;
  115.                 }
  116.  
  117.                 img {
  118.                     width: 35px;
  119.                     margin-top: 5px;
  120.                     margin-right: 5px;
  121.                     cursor: pointer;
  122.  
  123.                     &:hover {
  124.                         transform: scale(1.2);
  125.                         padding: 5px;
  126.                         background: #ffd000;
  127.                     }
  128.                 }
  129.  
  130.                 button:nth-child(2) {
  131.                     display: none;
  132.                     /* 放大镜效果 */
  133.                     transform: scale(1.16);
  134.                 }
  135.             }
  136.         }
  137.  
  138.         main {
  139.             display: flex;
  140.             flex-direction: column;
  141.             align-items: center;
  142.  
  143.             #countdownContainer {
  144.                 display: flex;
  145.                 flex-direction: column;
  146.                 align-items: center;
  147.  
  148.                 button {
  149.                     font-size: 1.5rem;
  150.                     color: hsla(160, 100%, 37%, 0.63);
  151.                     text-shadow: 1px 1px 1px #100000;
  152.                     cursor: pointer;
  153.                     border-radius: 3px;
  154.                     /* background-color: #f30303; */
  155.                     border: none;
  156.                     margin: 5px;
  157.                     padding: 3px;
  158.                 }
  159.  
  160.                 dialog {
  161.                     transform: translate(180%, 80%);
  162.                 }
  163.  
  164.                 dialog::backdrop {
  165.                     /* 模糊背景 */
  166.                     backdrop-filter: blur(2px);
  167.                 }
  168.             }
  169.  
  170.             table {
  171.                 border-collapse: collapse;
  172.  
  173.                 th,
  174.                 td {
  175.                     text-align: center;
  176.                     padding: 8px;
  177.                     border: 1px solid #ddd;
  178.                 }
  179.  
  180.                 th {
  181.                     background-color: #9f9e9e;
  182.                 }
  183.  
  184.                 td {
  185.                     color: hsl(160, 100%, 37%);
  186.                     text-shadow: 1px 1px 1px #030303;
  187.                 }
  188.             }
  189.         }
  190.     </style>
  191. </head>
  192.  
  193. <body>
  194.     <header>
  195.         <!-- logo -->
  196.         <figure class="logo">
  197.             <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
  198.                 <img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
  199.             </a>
  200.             <figcaption class="my_name1">与妖为邻</figcaption>
  201.             <figcaption class="my_name2">与妖为邻</figcaption>
  202.             <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"
  203.                 title="首页" target="_blank">
  204.                 <img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
  205.             </a>
  206.         </figure>
  207.         <!-- 时间 -->
  208.         <time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time>
  209.         <!-- 天气 -->
  210.         <iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
  211.             src="https://i.tianqi.com/?c=code&id=99">
  212.         </iframe>
  213.         <!-- 全屏还原关闭按钮 -->
  214.         <menu>
  215.             <button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"
  216.                     onclick="fullScreen()"></button>
  217.             <button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"
  218.                     onclick="exitFullScreen()"></button>
  219.             <button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button>
  220.         </menu>
  221.     </header>
  222.     <main>
  223.         <div id="countdownContainer"></div>
  224.         <table id="characterTable">
  225.             <tr>
  226.                 <th>序号</th>
  227.                 <th>元素</th>
  228.                 <th>角色</th>
  229.                 <th>等级</th>
  230.                 <th>命座</th>
  231.                 <th>天赋</th>
  232.                 <th>备注</th>
  233.             </tr>
  234.         </table>
  235.     </main>
  236. </body>
  237. <script>
  238.     /* 现在时间*/
  239.     var current_time = document.getElementById("dateTime");
  240.     function showTime() {
  241.         var now = new Date();
  242.         var year = now.getFullYear();
  243.         var month = ("0" + (now.getMonth() + 1)).slice(-2);
  244.         var day = ("0" + now.getDate()).slice(-2);
  245.         var hour = ("0" + now.getHours()).slice(-2);
  246.         var min = ("0" + now.getMinutes()).slice(-2);
  247.         var second = ("0" + now.getSeconds()).slice(-2);
  248.         var week = [
  249.             "星期日",
  250.             "星期一",
  251.             "星期二",
  252.             "星期三",
  253.             "星期四",
  254.             "星期五",
  255.             "星期六",
  256.         ][now.getDay()];
  257.         var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
  258.         current_time.innerHTML = time;
  259.     }
  260.     showTime();
  261.     setInterval(showTime, 1000);
  262.     /* 现在时间 结束*/
  263.     /* 全屏功能与关闭*/
  264.     function fullScreen() {
  265.         var elem = document.documentElement;
  266.         if (elem.requestFullscreen) {
  267.             elem.requestFullscreen();
  268.         } else if (elem.mozRequestFullScreen) { // Firefox
  269.             elem.mozRequestFullScreen();
  270.         } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
  271.             elem.webkitRequestFullscreen();
  272.         } else if (elem.msRequestFullscreen) { // IE/Edge
  273.             elem.msRequestFullscreen();
  274.         }
  275.     }
  276.     function exitFullScreen() {
  277.         if (document.exitFullscreen) {
  278.             document.exitFullscreen();
  279.         } else if (document.mozCancelFullScreen) { // Firefox
  280.             document.mozCancelFullScreen();
  281.         } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
  282.             document.webkitExitFullscreen();
  283.         } else if (document.msExitFullscreen) { // IE/Edge
  284.             document.msExitFullscreen();
  285.         }
  286.     }
  287.     // 获取全屏和还原按钮
  288.     var fullScreenBtn = document.querySelector(".fullScreen");
  289.     var exitFullScreenBtn = document.querySelector(".exitFullScreen");
  290.     // 监听全屏和还原事件
  291.     document.addEventListener("fullscreenchange", function () {
  292.         if (document.fullscreenElement) {
  293.             fullScreenBtn.style.display = "none";
  294.             exitFullScreenBtn.style.display = "block";
  295.         } else {
  296.             fullScreenBtn.style.display = "block";
  297.             exitFullScreenBtn.style.display = "none";
  298.         }
  299.     });
  300.     // 关闭当前窗口
  301.     function closeAll() {
  302.         window.close();
  303.     }
  304.     /* 全屏功能与关闭 结束*/
  305.     /* 倒计时功能渲染*/
  306.     const countdownContainer = document.getElementById('countdownContainer');
  307.     function createCountdownElement(id) {
  308.         const button = document.createElement('button');
  309.         button.textContent = `第${id}个倒计时`;
  310.         button.id = `countdownElement${id}`;
  311.         button.onclick = () => document.getElementById(`dialogCountdownElement${id}`).showModal();
  312.         const dialog = document.createElement('dialog');
  313.         dialog.id = `dialogCountdownElement${id}`;
  314.         const form = document.createElement('form');
  315.         form.method = 'dialog';
  316.         const messageDiv = document.createElement('div');
  317.         const messageLabel = document.createElement('label');
  318.         messageLabel.textContent = '更改提示信息：';
  319.         messageLabel.htmlFor = `message${id}`;
  320.         const messageInput = document.createElement('input');
  321.         messageInput.type = 'text';
  322.         messageInput.id = `message${id}`;
  323.         messageInput.value = '距离2024年国庆节还有：';
  324.         messageDiv.appendChild(messageLabel);
  325.         messageDiv.appendChild(messageInput);
  326.         const targetDateDiv = document.createElement('div');
  327.         const targetDateLabel = document.createElement('label');
  328.         targetDateLabel.textContent = '更改目标日期：';
  329.         targetDateLabel.htmlFor = `targetDate${id}`;
  330.         const targetDateInput = document.createElement('input');
  331.         targetDateInput.type = 'datetime-local';
  332.         targetDateInput.id = `targetDate${id}`;
  333.         targetDateDiv.appendChild(targetDateLabel);
  334.         targetDateDiv.appendChild(targetDateInput);
  335.         const closeButton = document.createElement('button');
  336.         closeButton.type = 'submit';
  337.         closeButton.textContent = '关闭';
  338.         closeButton.style.display = 'block';
  339.         closeButton.style.margin = '5px auto';
  340.         form.appendChild(messageDiv);
  341.         form.appendChild(targetDateDiv);
  342.         form.appendChild(closeButton);
  343.         dialog.appendChild(form);
  344.         countdownContainer.appendChild(button);
  345.         countdownContainer.appendChild(dialog);
  346.     }
  347.     for (let i = 1; i <= 4; i++) {
  348.         createCountdownElement(i);
  349.     }
  350.     /* 倒计时功能渲染 结束*/
  351.     /* 倒计时功能实现*/
  352.     const countdownData = {
  353.         1: { message: 'message1', targetDate: 'targetDate1' },
  354.         2: { message: 'message2', targetDate: 'targetDate2' },
  355.         3: { message: 'message3', targetDate: 'targetDate3' },
  356.         4: { message: 'message4', targetDate: 'targetDate4' }
  357.     };
  358.     // 加载时从localStorage读取数据
  359.     window.onload = function () {
  360.         for (let id in countdownData) {
  361.             const message = localStorage.getItem(countdownData[id].message);
  362.             const targetDate = localStorage.getItem(countdownData[id].targetDate);
  363.             if (message) {
  364.                 document.getElementById(countdownData[id].message).value = message;
  365.             }
  366.             if (targetDate) {
  367.                 document.getElementById(countdownData[id].targetDate).value = targetDate;
  368.             }
  369.         }
  370.     };
  371.     // 保存数据到localStorage
  372.     function saveData(id) {
  373.         const message = document.getElementById(countdownData[id].message).value;
  374.         const targetDate = document.getElementById(countdownData[id].targetDate).value;
  375.         localStorage.setItem(countdownData[id].message, message);
  376.         localStorage.setItem(countdownData[id].targetDate, targetDate);
  377.     }
  378.     // 监听输入框的变化并保存数据
  379.     for (let id in countdownData) {
  380.         document.getElementById(countdownData[id].message).addEventListener('input', () => saveData(id));
  381.         document.getElementById(countdownData[id].targetDate).addEventListener('input', () => saveData(id));
  382.     }
  383.     function showCountdown(id) {
  384.         const message = document.getElementById(countdownData[id].message).value;
  385.         const targetDateInput = document.getElementById(countdownData[id].targetDate);
  386.         const targetDateValue = targetDateInput.value;
  387.         const now = new Date();
  388.         let targetDate;
  389.         if (targetDateValue) {
  390.             targetDate = new Date(targetDateValue);
  391.         } else {
  392.             targetDate = new Date(2024, 9, 1); // 默认值：2024年10月1日
  393.         }
  394.         const diff = targetDate - now;
  395.         const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  396.         const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  397.         const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  398.         const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  399.         const countdownElement = document.getElementById(`countdownElement${id}`);
  400.         countdownElement.innerHTML = `${message}${days}天${hours}小时${minutes}分${seconds}秒`;
  401.     }
  402.     for (let id in countdownData) {
  403.         showCountdown(id);
  404.         setInterval(() => showCountdown(id), 1000);
  405.     }
  406.     /* 倒计时功能实现 结束*/
  407.     // 原神角色数据
  408.     const data = [
  409.         {
  410.             "element": "火",
  411.             characters: [
  412.                 {
  413.                     "role": "班尼特",
  414.                     "level": 90,
  415.                     "constellation": "5",
  416.                     "talent": "10-13-13",
  417.                     "note": "4宗室"
  418.                 },
  419.                 {
  420.                     "role": "霄宫",
  421.                     "level": 90,
  422.                     "constellation": "1",
  423.                     "talent": "10-10-10",
  424.                     "note": "五追忆"
  425.                 },
  426.                 {
  427.                     "role": "香菱",
  428.                     "level": 90,
  429.                     "constellation": "3",
  430.                     "talent": "1-7-12",
  431.                     "note": "五绝缘"
  432.                 },
  433.             ]
  434.         },
  435.         {
  436.             "element": "水",
  437.             characters: [
  438.                 {
  439.                     "role": "夜兰",
  440.                     "level": 90,
  441.                     "constellation": "1",
  442.                     "talent": "10-10-10",
  443.                     "note": "五绝缘"
  444.                 },
  445.                 {
  446.                     "role": "珊瑚宫心海",
  447.                     "level": 90,
  448.                     "constellation": "0",
  449.                     "talent": "7-10-8",
  450.                     "note": "4海染"
  451.                 }
  452.             ]
  453.         },
  454.         {
  455.             "element": "风",
  456.             characters: [
  457.                 {
  458.                     "role": "枫原万叶",
  459.                     "level": 90,
  460.                     "constellation": "1",
  461.                     "talent": "10-10-10",
  462.                     "note": "4翠绿"
  463.                 },
  464.                 {
  465.                     "role": "流浪者",
  466.                     "level": 90,
  467.                     "constellation": "0",
  468.                     "talent": "10-10-10",
  469.                     "note": "五沙上"
  470.                 }
  471.             ]
  472.         },
  473.         {
  474.             "element": "雷",
  475.             characters: [
  476.                 {
  477.                     "role": "雷电将军",
  478.                     "level": 90,
  479.                     "constellation": "3",
  480.                     "talent": "10-10-13",
  481.                     "note": "五绝缘"
  482.                 },
  483.                 {
  484.                     "role": "刻晴",
  485.                     "level": 90,
  486.                     "constellation": "1",
  487.                     "talent": "1-1-1",
  488.                     "note": "无"
  489.                 },
  490.             ]
  491.         },
  492.         {
  493.             "element": "草",
  494.             characters: [
  495.                 {
  496.                     "role": "纳西妲",
  497.                     "level": 90,
  498.                     "constellation": "0",
  499.                     "talent": "9-10-9",
  500.                     "note": "5深林"
  501.                 },
  502.                 {
  503.                     "role": "提纳里",
  504.                     "level": 70,
  505.                     "constellation": "2",
  506.                     "talent": "1-1-1",
  507.                     "note": "无"
  508.                 },
  509.             ]
  510.         },
  511.         {
  512.             "element": "冰",
  513.             characters: [
  514.                 {
  515.                     "role": "七七",
  516.                     "level": 90,
  517.                     "constellation": "1",
  518.                     "talent": "9-10-9",
  519.                     "note": "五海染"
  520.                 },
  521.                 {
  522.                     "role": "迪奥娜",
  523.                     "level": 90,
  524.                     "constellation": "6",
  525.                     "talent": "1-9-9",
  526.                     "note": "2千岩2海染"
  527.                 }
  528.             ]
  529.         },
  530.         {
  531.             "element": "岩",
  532.             characters: [
  533.                 {
  534.                     "role": "钟离",
  535.                     "level": 90,
  536.                     "constellation": "0",
  537.                     "talent": "9-10-10",
  538.                     "note": "五千岩"
  539.                 },
  540.                 {
  541.                     "role": "凝光",
  542.                     "level": 70,
  543.                     "constellation": "6",
  544.                     "talent": "1-4-4",
  545.                     "note": "无"
  546.                 }
  547.             ]
  548.         },
  549.     ];
  550.     // 获取页面上的表格元素
  551.     const characterTable = document.getElementById("characterTable");
  552.     // 初始化行号
  553.     let row = 1;
  554.     // 记录上一个元素
  555.     let lastElement = null;
  556.     // 记录元素的行跨度
  557.     let elementRowSpan = 1;
  558.     // 遍历数据
  559.     for (let i = 0; i < data.length; i++) {
  560.         const elementData = data[i];
  561.         // 遍历每个元素的角色数据
  562.         for (let j = 0; j < elementData.characters.length; j++) {
  563.             const character = elementData.characters[j];
  564.             const newRow = characterTable.insertRow();
  565.             newRow.insertCell().textContent = row++;
  566.             // 如果元素与上一个元素不同，则插入新的元素单元格，并设置行跨度
  567.             if (elementData.element !== lastElement) {
  568.                 const elementCell = newRow.insertCell();
  569.                 elementCell.rowSpan = elementData.characters.length;
  570.                 elementCell.textContent = elementData.element;
  571.                 lastElement = elementData.element;
  572.             }
  573.             newRow.insertCell().textContent = character.role;
  574.             newRow.insertCell().textContent = character.level;
  575.             newRow.insertCell().textContent = character.constellation;
  576.             newRow.insertCell().textContent = character.talent;
  577.             newRow.insertCell().textContent = character.note;
  578.             // 根据元素类型设置背景颜色
  579.             // 根据元素类型设置背景颜色
  580.             /*
  581.               原神中的七大元素颜色分别为：‌
  582.               火（‌红色）‌、‌水（‌蓝色）‌、‌风（‌青色）‌、‌雷（‌紫色）‌、‌草（‌绿色）‌、‌冰（‌浅蓝色）‌、‌岩（‌黄色）‌。‌
  583.                */
  584.             switch (elementData.element) {
  585.                 case "火":
  586.                     newRow.style.backgroundColor = "#FF0000"; // 红色
  587.                     break;
  588.                 case "水":
  589.                     newRow.style.backgroundColor = "#0000FF"; // 蓝色
  590.                     break;
  591.                 case "风":
  592.                     newRow.style.backgroundColor = "#00FFFF"; // 青色
  593.                     break;
  594.                 case "雷":
  595.                     newRow.style.backgroundColor = "#800080"; // 紫色
  596.                     break;
  597.                 case "草":
  598.                     newRow.style.backgroundColor = "#008000"; // 深绿色
  599.                     break;
  600.                 case "冰":
  601.                     newRow.style.backgroundColor = "#ADD8E6"; // 浅蓝色
  602.                     break;
  603.                 case "岩":
  604.                     newRow.style.backgroundColor = "#FFFF00"; // 黄色
  605.                     break;
  606.             }
  607.         }
  608.     }
  609. </script>
  610.  
  611. </html>

 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号