|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>2026高考倒计时</title> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Noto+Sans+SC:wght@300;400&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #00ffff; |
|
|
--glow-color: rgba(0, 255, 255, 0.75); |
|
|
--bg-color: #020a1a; |
|
|
--text-color: #e0e0e0; |
|
|
} |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
font-family: 'Noto Sans SC', sans-serif; |
|
|
background-color: var(--bg-color); |
|
|
color: var(--text-color); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
min-height: 100vh; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
.stars { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: |
|
|
radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)), |
|
|
radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)), |
|
|
radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)), |
|
|
radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)), |
|
|
radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)), |
|
|
radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0)); |
|
|
background-repeat: repeat; |
|
|
background-size: 200px 200px; |
|
|
animation: zoom 15s infinite; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.stars:nth-child(2) { |
|
|
background-position: 100px 100px; |
|
|
animation-delay: 3s; |
|
|
} |
|
|
|
|
|
.stars:nth-child(3) { |
|
|
background-position: 50px 50px; |
|
|
animation-delay: 5s; |
|
|
} |
|
|
|
|
|
@keyframes zoom { |
|
|
0% { |
|
|
opacity: 0; |
|
|
transform: scale(0.5) translateY(100%); |
|
|
} |
|
|
50% { |
|
|
opacity: 0.7; |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
transform: scale(1.5) translateY(-50%); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
text-align: center; |
|
|
z-index: 1; |
|
|
background: rgba(10, 25, 47, 0.6); |
|
|
padding: 40px 60px; |
|
|
border-radius: 15px; |
|
|
border: 1px solid rgba(0, 255, 255, 0.2); |
|
|
backdrop-filter: blur(10px); |
|
|
box-shadow: 0 0 30px rgba(0, 255, 255, 0.15); |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 3em; |
|
|
font-weight: 400; |
|
|
color: var(--primary-color); |
|
|
margin-bottom: 30px; |
|
|
letter-spacing: 4px; |
|
|
text-shadow: |
|
|
0 0 5px var(--glow-color), |
|
|
0 0 10px var(--glow-color), |
|
|
0 0 15px var(--glow-color); |
|
|
} |
|
|
|
|
|
#timer { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.time-box { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
padding: 15px; |
|
|
min-width: 100px; |
|
|
} |
|
|
|
|
|
.time-box span:first-child { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
font-size: 4.5em; |
|
|
font-weight: 700; |
|
|
color: var(--primary-color); |
|
|
line-height: 1; |
|
|
text-shadow: |
|
|
0 0 5px var(--glow-color), |
|
|
0 0 15px var(--glow-color), |
|
|
0 0 25px var(--glow-color); |
|
|
} |
|
|
|
|
|
.time-box span.label { |
|
|
font-size: 1.2em; |
|
|
margin-top: 10px; |
|
|
color: var(--text-color); |
|
|
font-weight: 300; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.motto { |
|
|
margin-top: 40px; |
|
|
font-size: 1.2em; |
|
|
font-style: italic; |
|
|
color: #aaa; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 30px; |
|
|
margin: 15px; |
|
|
} |
|
|
h1 { |
|
|
font-size: 2em; |
|
|
} |
|
|
#timer { |
|
|
flex-direction: column; |
|
|
gap: 5px; |
|
|
} |
|
|
.time-box { |
|
|
flex-direction: row; |
|
|
justify-content: space-between; |
|
|
align-items: baseline; |
|
|
width: 100%; |
|
|
padding: 10px 0; |
|
|
} |
|
|
.time-box span:first-child { |
|
|
font-size: 3em; |
|
|
} |
|
|
.time-box span.label { |
|
|
font-size: 1em; |
|
|
margin-top: 0; |
|
|
} |
|
|
.motto { |
|
|
font-size: 1em; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="stars"></div> |
|
|
<div class="stars"></div> |
|
|
<div class="stars"></div> |
|
|
|
|
|
<div class="container" id="countdown-container"> |
|
|
<h1 id="title">2026高考倒计时</h1> |
|
|
<div id="timer"> |
|
|
<div class="time-box"> |
|
|
<span id="days">00</span> |
|
|
<span class="label">天</span> |
|
|
</div> |
|
|
<div class="time-box"> |
|
|
<span id="hours">00</span> |
|
|
<span class="label">时</span> |
|
|
</div> |
|
|
<div class="time-box"> |
|
|
<span id="minutes">00</span> |
|
|
<span class="label">分</span> |
|
|
</div> |
|
|
<div class="time-box"> |
|
|
<span id="seconds">00</span> |
|
|
<span class="label">秒</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="motto">金榜题名，未来可期</p> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const daysEl = document.getElementById('days'); |
|
|
const hoursEl = document.getElementById('hours'); |
|
|
const minutesEl = document.getElementById('minutes'); |
|
|
const secondsEl = document.getElementById('seconds'); |
|
|
const titleEl = document.getElementById('title'); |
|
|
const timerEl = document.getElementById('timer'); |
|
|
|
|
|
function getTargetDate() { |
|
|
const now = new Date(); |
|
|
let targetYear = now.getFullYear(); |
|
|
|
|
|
|
|
|
const targetDate = new Date(targetYear, 5, 7, 9, 0, 0); |
|
|
|
|
|
|
|
|
if (now > targetDate) { |
|
|
targetYear++; |
|
|
targetDate.setFullYear(targetYear); |
|
|
} |
|
|
|
|
|
return targetDate; |
|
|
} |
|
|
|
|
|
function updateCountdown() { |
|
|
const targetDate = getTargetDate(); |
|
|
const now = new Date().getTime(); |
|
|
const distance = targetDate - now; |
|
|
|
|
|
if (distance <= 0) { |
|
|
|
|
|
clearInterval(countdownInterval); |
|
|
titleEl.textContent = "考试加油！"; |
|
|
timerEl.innerHTML = "<p style='font-size: 2em; color: var(--primary-color);'>祝君凯旋</p>"; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24)); |
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); |
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000); |
|
|
|
|
|
|
|
|
daysEl.textContent = String(days).padStart(2, '0'); |
|
|
hoursEl.textContent = String(hours).padStart(2, '0'); |
|
|
minutesEl.textContent = String(minutes).padStart(2, '0'); |
|
|
secondsEl.textContent = String(seconds).padStart(2, '0'); |
|
|
} |
|
|
|
|
|
|
|
|
updateCountdown(); |
|
|
|
|
|
|
|
|
const countdownInterval = setInterval(updateCountdown, 1000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
