实现HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信质集团SAP/ERP切换倒计时</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: rgba(111, 123, 4, 0.5);
color: white;
text-align: center;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
background: url(1.jpg);
background-size:cover;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
max-width: 100%;
height:100%;
width: 100%;
}
h1 {
font-size: 6.5rem;
margin-top: 200px;
margin-bottom: 160px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.countdown {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.countdown-item {
background-color: rgba(255, 255, 255, 0.2);
padding: 40px;
font-size: 3.5rem;
border-radius: 20px;
min-width: 240px;
}
.countdown-number {
font-size: 5.5rem;
font-weight: bold;
margin: 10px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.countdown-label {
font-size: 1.2rem;
opacity: 0.8;
}
.date-info {
margin-top: 30px;
font-size: 1.2rem;
}
.motivation {
margin-top: 30px;
font-style: italic;
font-size: 1.3rem;
color: #ffcc00;
}
@media (max-width: 600px) {
.countdown-item {
min-width: 80px;
padding: 15px;
}
.countdown-number {
font-size: 2.5rem;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>全营一杆枪，SAP项目上线冲剌！</h1>
<div class="countdown">
<div class="countdown-item">
<div class="countdown-number" id="days">00</div>
<div class="countdown-label">天</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="hours">00</div>
<div class="countdown-label">小时</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="minutes">00</div>
<div class="countdown-label">分钟</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="seconds">00</div>
<div class="countdown-label">秒</div>
</div>
</div>
<div class="date-info" style="display:none;" >
<p>今天是：<span id="current-date"></span></p>
<p>信质集团SAP/ERP切换日期：09月30日</p>
</div>
<div class="motivation" id="motivation-text"></div>
</div>
<script>
// 设置高考日期 - 2025年6月7日
const gaokaoDate = new Date('2025-09-30T00:00:00');
// 励志语句数组
const motivations = [
"乾坤未定，你我皆是黑马！",
"今日拼搏的汗水，终将化为明日的辉煌！",
"每一秒的努力，都在为未来铺路！",
"坚持就是胜利，高考加油！",
"你的努力，终将成就更好的自己！",
"此刻的付出，是为了遇见更好的未来！"
];
// 更新倒计时
function updateCountdown() {
const now = new Date();
const diff = gaokaoDate - 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);
// 更新显示
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
// 更新当前日期
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
}
// 随机显示励志语句
// function showRandomMotivation() {
// const randomIndex = Math.floor(Math.random() * motivations.length);
// document.getElementById('motivation-text').textContent = motivations[randomIndex];
// }
// 初始化
updateCountdown();
// showRandomMotivation();
// 每秒更新一次
setInterval(updateCountdown, 1000);
// 每30秒更换一次励志语句
//setInterval(showRandomMotivation, 30000);
</script>
</body>
</html>资源图片
