时间统计倒计时模块代码

逍遥亦自由 · 发表在 2026-4-9 14:38:28

马上注册，获取更多创业资源，认识更多朋友！

您需要登录才可以下载或查看，没有帐号？立即注册

x

这代码可以放在网页、APP上，如果能获取会员年龄，在底部还可以增加一项人生倒计时。
时间统计代码.jpg

<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.title {
font-size: 22px;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 25px;
}
.timer-item {
margin-bottom: 20px;
}
.item-label {
font-size: 15px;
color: #666;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.progress-bar {
height: 12px;
background-color: #eee;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, #86e586, #66cc66);
border-radius: 6px;
transition: width 0.5s ease;
}
.percent {
color: #ff6666;
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<div class="title">混吃等死计时器</div>
<div class="timer-item">
<div class="item-label">
<span id="today-text">今天已过去 0 小时</span>
<span class="percent" id="today-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="today-bar"></div>
</div>
</div>
<div class="timer-item">
<div class="item-label">
<span id="week-text">本周已过去 0 天</span>
<span class="percent" id="week-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="week-bar"></div>
</div>
</div>
<div class="timer-item">
<div class="item-label">
<span id="month-text">本月已过去 0 天</span>
<span class="percent" id="month-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="month-bar"></div>
</div>
</div>
<div class="timer-item">
<div class="item-label">
<span id="year-text">今年已过去 0 个月零 0 天</span>
<span class="percent" id="year-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="year-bar"></div>
</div>
</div>
<div class="timer-item">
<div class="item-label">
<span id="spring-text">离春节还有 0 天 0 时</span>
<span class="percent" id="spring-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="spring-bar"></div>
</div>
</div>
</div>
<script>
// 获取当前时间
function getCurrentTime() {
return new Date();
}
// 计算今日进度（小时）
function calculateTodayProgress() {
const now = getCurrentTime();
const hours = now.getHours();
const minutes = now.getMinutes();
const totalHoursToday = hours + minutes / 60;
const percent = (totalHoursToday / 24) * 100;
document.getElementById('today-text').textContent = `今天已过去 ${Math.floor(totalHoursToday)} 小时`;
document.getElementById('today-percent').textContent = `${Math.round(percent)}%`;
document.getElementById('today-bar').style.width = `${percent}%`;
}
// 计算本周进度（天）
function calculateWeekProgress() {
const now = getCurrentTime();
// 周日是0，周一到周六是1-6，转换为周一为第1天
let day = now.getDay();
day = day === 0 ? 7 : day; // 周日算第7天
const percent = (day / 7) * 100;
document.getElementById('week-text').textContent = `本周已过去 ${day} 天`;
document.getElementById('week-percent').textContent = `${Math.round(percent)}%`;
document.getElementById('week-bar').style.width = `${percent}%`;
}
// 计算本月进度（天）
function calculateMonthProgress() {
const now = getCurrentTime();
const day = now.getDate();
const month = now.getMonth();
const year = now.getFullYear();
// 获取当月总天数
const totalDays = new Date(year, month + 1, 0).getDate();
const percent = (day / totalDays) * 100;
document.getElementById('month-text').textContent = `本月已过去 ${day} 天`;
document.getElementById('month-percent').textContent = `${Math.round(percent)}%`;
document.getElementById('month-bar').style.width = `${percent}%`;
}
// 计算今年进度（月+天）
function calculateYearProgress() {
const now = getCurrentTime();
const year = now.getFullYear();
const month = now.getMonth(); // 0-11
const day = now.getDate();
// 计算今年已过的总天数
let passedDays = 0;
for (let i = 0; i < month; i++) {
passedDays += new Date(year, i + 1, 0).getDate();
}
passedDays += day;
// 计算今年总天数（判断闰年）
const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
const totalDays = isLeapYear ? 366 : 365;
const percent = (passedDays / totalDays) * 100;
// 格式化显示：X个月零Y天
document.getElementById('year-text').textContent = `今年已过去 ${month} 个月零 ${day} 天`;
document.getElementById('year-percent').textContent = `${Math.round(percent)}%`;
document.getElementById('year-bar').style.width = `${percent}%`;
}
// 优化：获取下一个春节的日期（2025-2030年春节日期，可扩展）
function getNextSpringFestivalDate(currentYear) {
// 春节日期对照表（月/日，月份从0开始）
const springFestivalDates = {
2025: [0, 29], // 2025年1月29日
2026: [0, 17], // 2026年1月17日
2027: [1, 6], // 2027年2月6日
2028: [1, 26], // 2028年2月26日
2029: [1, 13], // 2029年2月13日
2030: [1, 3], // 2030年2月3日
};
// 获取当前年份的春节日期
let targetYear = currentYear;
let springMonth = springFestivalDates[targetYear][0];
let springDay = springFestivalDates[targetYear][1];
let springDate = new Date(targetYear, springMonth, springDay);
// 如果当前年份的春节已过，取明年的
const now = getCurrentTime();
if (now > springDate) {
targetYear += 1;
springMonth = springFestivalDates[targetYear][0];
springDay = springFestivalDates[targetYear][1];
springDate = new Date(targetYear, springMonth, springDay);
}
return {
date: springDate,
year: targetYear
};
}
// 优化：计算距离下一年春节的倒计时
function calculateSpringFestival() {
const now = getCurrentTime();
const currentYear = now.getFullYear();
const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
// 获取下一个春节的日期
const nextSpring = getNextSpringFestivalDate(currentYear);
const springDate = nextSpring.date;
const springYear = nextSpring.year;
// 计算剩余时间
const diffMs = springDate - now;
const days = Math.floor(diffMs / oneDay);
const hours = Math.floor((diffMs % oneDay) / (60 * 60 * 1000));
// 计算进度百分比：从本年1月1日到现在的天数 / 从本年1月1日到春节的总天数
const startOfYear = new Date(currentYear, 0, 1); // 本年1月1日
const totalDaysToSpring = Math.floor((springDate - startOfYear) / oneDay); // 年初到春节总天数
const passedDays = Math.floor((now - startOfYear) / oneDay); // 年初到现在已过天数
const percent = totalDaysToSpring > 0 ? (passedDays / totalDaysToSpring) * 100 : 0;
// 更新界面显示
document.getElementById('spring-text').textContent = `离${springYear}年春节还有 ${days} 天 ${hours} 时`;
document.getElementById('spring-percent').textContent = `${Math.round(percent)}%`;
document.getElementById('spring-bar').style.width = `${percent}%`;
}
// 初始化所有进度
function initAllProgress() {
calculateTodayProgress();
calculateWeekProgress();
calculateMonthProgress();
calculateYearProgress();
calculateSpringFestival();
}
// 页面加载时初始化，每分钟更新一次（提升倒计时精度）
window.onload = function() {
initAllProgress();
setInterval(initAllProgress, 60 * 1000);
};
</script>
</body>
</html>

复制代码

时间统计倒计时模块代码

马上注册，获取更多创业资源，认识更多朋友！

发表回复