当前位置： 首页 > news >正文

原神自定义倒计时

news 来源：原创 2024/9/20 10:48:44 

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>原神倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;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%);}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(160, 100%, 37%);text-shadow: 1px 1px 1px #030303;}}}</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><table id="characterTable"><tr><th>序号</th><th>元素</th><th>角色</th><th>等级</th><th>命座</th><th>天赋</th><th>备注</th></tr></table></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) { // Firefoxelem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Operaelem.webkitRequestFullscreen();} else if (elem.msRequestFullscreen) { // IE/Edgeelem.msRequestFullscreen();}}function exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) { // Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // Chrome, Safari and Operadocument.webkitExitFullscreen();} else if (document.msExitFullscreen) { // IE/Edgedocument.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;}}};// 保存数据到localStoragefunction 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);}/* 倒计时功能实现 结束*/// 原神角色数据const data = [{"element": "火",characters: [{"role": "班尼特","level": 90,"constellation": "5","talent": "10-13-13","note": "4宗室"},{"role": "霄宫","level": 90,"constellation": "1","talent": "10-10-10","note": "五追忆"},{"role": "香菱","level": 90,"constellation": "3","talent": "1-7-12","note": "五绝缘"},]},{"element": "水",characters: [{"role": "夜兰","level": 90,"constellation": "1","talent": "10-10-10","note": "五绝缘"},{"role": "珊瑚宫心海","level": 90,"constellation": "0","talent": "7-10-8","note": "4海染"}]},{"element": "风",characters: [{"role": "枫原万叶","level": 90,"constellation": "1","talent": "10-10-10","note": "4翠绿"},{"role": "流浪者","level": 90,"constellation": "0","talent": "10-10-10","note": "五沙上"}]},{"element": "雷",characters: [{"role": "雷电将军","level": 90,"constellation": "3","talent": "10-10-13","note": "五绝缘"},{"role": "刻晴","level": 90,"constellation": "1","talent": "1-1-1","note": "无"},]},{"element": "草",characters: [{"role": "纳西妲","level": 90,"constellation": "0","talent": "9-10-9","note": "5深林"},{"role": "提纳里","level": 70,"constellation": "2","talent": "1-1-1","note": "无"},]},{"element": "冰",characters: [{"role": "七七","level": 90,"constellation": "1","talent": "9-10-9","note": "五海染"},{"role": "迪奥娜","level": 90,"constellation": "6","talent": "1-9-9","note": "2千岩2海染"}]},{"element": "岩",characters: [{"role": "钟离","level": 90,"constellation": "0","talent": "9-10-10","note": "五千岩"},{"role": "凝光","level": 70,"constellation": "6","talent": "1-4-4","note": "无"}]},];// 获取页面上的表格元素const characterTable = document.getElementById("characterTable");// 初始化行号let row = 1;// 记录上一个元素let lastElement = null;// 记录元素的行跨度let elementRowSpan = 1;// 遍历数据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().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().textContent = character.level;newRow.insertCell().textContent = character.constellation;newRow.insertCell().textContent = character.talent;newRow.insertCell().textContent = character.note;// 根据元素类型设置背景颜色// 根据元素类型设置背景颜色/*原神中的七大元素颜色分别为：‌火（‌红色）‌、‌水（‌蓝色）‌、‌风（‌青色）‌、‌雷（‌紫色）‌、‌草（‌绿色）‌、‌冰（‌浅蓝色）‌、‌岩（‌黄色）‌。‌*/switch (elementData.element) {case "火":newRow.style.backgroundColor = "#FF0000"; // 红色break;case "水":newRow.style.backgroundColor = "#0000FF"; // 蓝色break;case "风":newRow.style.backgroundColor = "#00FFFF"; // 青色break;case "雷":newRow.style.backgroundColor = "#800080"; // 紫色break;case "草":newRow.style.backgroundColor = "#008000"; // 深绿色break;case "冰":newRow.style.backgroundColor = "#ADD8E6"; // 浅蓝色break;case "岩":newRow.style.backgroundColor = "#FFFF00"; // 黄色break;}}}
</script></html>

 

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Codeforces Round 960 (Div. 2)-补题
  • Web 搜索引擎优化
  • AI论文速读 | 2024MM【开源】时间序列预测中频率动态融合
  • 【Python机器学习】支持向量机——手写数字识别问题
  • 深入理解HTTP/2：nghttp2库源码解析及客户端实现示例
  • 反激式电源为什么上电最容易烧MOS管？
  • python dash框架
  • 【linux深入剖析】初识线程---线程概念
  • JavaEE-多线程编程阻塞队列
  • 探索之路——初识 Vue Router：构建单页面应用的完整指南
  • 网络空间安全专业怎么样，可通过哪些途径自学？
  • 【Redis】 Redis 列表指令指南
  • python open cv(图像处理的基本操作)
  • Spring Bean生命周期
  • 什么是单例模式？
  • 《Java编程思想》读书笔记-对象导论
  • 【407天】跃迁之路——程序员高效学习方法论探索系列（实验阶段164-2018.03.19）...
  • 【剑指offer】让抽象问题具体化
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列（实验阶段490-2019.2.23）...
  • 002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
  • Javascripit类型转换比较那点事儿，双等号（==）
  • magento2项目上线注意事项
  • Node + FFmpeg 实现Canvas动画导出视频
  • TiDB 源码阅读系列文章（十）Chunk 和执行框架简介
  • 理解在java “”i=i++;”所发生的事情
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 一些css基础学习笔记
  • 栈实现走出迷宫（C++）
  • elasticsearch-head插件安装
  • 湖北分布式智能数据采集方法有哪些？
  • 数据库巡检项
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • #我与Java虚拟机的故事#连载13：有这本书就够了
  • （M)unity2D敌人的创建、人物属性设置，遇敌掉血
  • （八）Flask之app.route装饰器函数的参数
  • (创新)基于VMD-CNN-BiLSTM的电力负荷预测—代码+数据
  • （二）延时任务篇——通过redis的key监听，实现延迟任务实战
  • （附源码）ssm基于jsp高校选课系统 毕业设计 291627
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • （转）Unity3DUnity3D在android下调试
  • ****三次握手和四次挥手
  • .equal()和==的区别 怎样判断字符串为空问题： Illegal invoke-super to void nio.file.AccessDeniedException
  • .L0CK3D来袭：如何保护您的数据免受致命攻击
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NET Core WebAPI中使用swagger版本控制，添加注释
  • .NET Core 版本不支持的问题
  • .NET 动态调用WebService + WSE + UsernameToken
  • .NET 服务 ServiceController
  • .net 后台导出excel ,word
  • .NET/C# 项目如何优雅地设置条件编译符号？
  • .net通用权限框架B/S (三)--MODEL层(2)
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表，包含自定义IOS对话框...
  • @Autowired和@Resource的区别
  • @reference注解_Dubbo配置参考手册之dubbo:reference
  • @select 怎么写存储过程_你知道select语句和update语句分别是怎么执行的吗？