2025三八妇女节倒计时html代码

admin · 发表于 2025-2-17 21:03:06

2025三八妇女节倒计时html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三八妇女节倒计时</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* 设置背景颜色为淡粉色，营造节日氛围 */
background-color: #ffe4e1;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
height: 100vh;
margin: 0;
}
.countdown-container {
text-align: center;
background-color: white;
padding: 40px;
border-radius: 10px;
/* 添加阴影效果 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.countdown-title {
font-size: 36px;
color: #ff69b4;
margin-bottom: 20px;
}
.countdown-timer {
font-size: 48px;
color: #333;
}
</style>
</head>
<body>
<div class="countdown-container">
<h1 class="countdown-title">距离三八妇女节还有：</h1>
<div class="countdown-timer" id="countdown"></div>
</div>
<script>
function updateCountdown() {
// 获取当前年份
const currentYear = new Date().getFullYear();
// 创建三八妇女节的日期对象，3 月 8 日
const womenDay = new Date(currentYear, 2, 8);
// 如果当前日期已经过了今年的三八妇女节，则计算下一年的
if (new Date() > womenDay) {
womenDay.setFullYear(currentYear + 1);
}
// 获取当前时间
const now = new Date().getTime();
// 计算距离三八妇女节的时间差（毫秒）
const distance = womenDay - now;
// 计算剩余的天数
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);
// 获取显示倒计时的元素
const countdownElement = document.getElementById('countdown');
// 将倒计时信息显示在页面上
countdownElement.innerHTML = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
// 如果倒计时结束
if (distance < 0) {
clearInterval(x);
countdownElement.innerHTML = "三八妇女节快乐！";
}
}
// 每秒更新一次倒计时
const x = setInterval(updateCountdown, 1000);
// 页面加载时立即更新一次倒计时
updateCountdown();
</script>
</body>
</html>

复制代码

klxf · 发表于 2025-2-18 00:01:36

哇，时间过得真快，谢谢管理员的2025三八妇女节倒计时html代码分享

蓝叶 · 发表于 2025-3-18 18:57:09

感谢分享，带来满满元气

秋思梦景 · 发表于 2025-3-18 19:33:33

感谢分享，解决我的难题啦哟

mewomen · 发表于 2025-3-18 19:34:34

支持博主，分享太精彩咯

heimeigui · 发表于 2025-3-18 20:22:28

感谢分享，充满生活情趣哟

pzqyhkor · 发表于 2025-3-18 23:07:41

提示: 作者被禁止或删除内容自动屏蔽

huakaibanxia · 发表于 2025-3-19 15:58:29

感谢分享，解决我的困惑

abc8831nc · 发表于 2025-3-19 17:21:06

支持佳作，期待更多分享哟

zhongshishenti · 发表于 2025-3-19 20:15:54

赞，顶帖真的超有水平

[htm] 2025三八妇女节倒计时html代码

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老