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

倒计时效果

news 2025/6/21 11:54:25

实现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>

资源图片