<!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) { // 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);
}
/* 倒计时功能实现 结束*/
// 原神角色数据
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>
