薪资实时计算器（等价物增强版）——完整功能实战与源码解析

这篇技术文章介绍了一个功能丰富的前端实时薪资计算器项目。文章首先提出了项目创意：将薪资实时计算并换算为日常消费物品（如咖啡、泡面）的概念，增加趣味性。随后详细介绍了项目技术栈（HTML5/CSS3/原生JS）、核心功能模块（实时薪资计算、等价物展示、双轴图表、倒计时、储蓄目标等）和实现细节，包括薪资计算公式、LocalStorage数据存储、SVG图表绘制等关键技术点。文章还提供了完整的运行步骤和

写不出来就跑路

350人浏览 · 2025-09-09 14:08:51

写不出来就跑路 · 2025-09-09 14:08:51 发布

💰 薪资实时计算器（等价物增强版）——完整功能实战与源码解析

📌 前言

在日常工作中，你是否好奇过，自己此刻的薪资到底多少了？如果能让实时薪资像股票行情那样滚动更新，并且告诉你“相当于几杯咖啡 / 几桶泡面”，是不是很有趣？

本文将带你实现一个功能全面的前端实时薪资计算器，具有等价物展示、主题切换、双轴图表、倒计时、储蓄目标计算器等功能。

最终效果如下：

🌙 / ☀️ 主题切换
💰 实时滚动显示当前薪资
📊 双轴图表显示近7天的收入与进度
⏰ 下班倒计时及提醒
🎯 储蓄目标计算与进度展示
💡 等价物（将当前薪资换算成日常消费物品）

🛠 技术栈

HTML5
CSS3
Vanilla JavaScript（原生 JS，无框架依赖）
本地存储 LocalStorage（保存用户数据）
SVG（绘制双轴图表）

🗂 项目结构

本项目是单页面应用，核心分为以下模块：

用户输入与存储
主题切换
薪资实时计算
等价物展示
历史记录与双轴图表
下班倒计时
储蓄目标计算器
数据持久化

🎨 界面布局与样式亮点

使用 :root 定义 CSS 变量，方便主题切换。
深色 / 浅色模式通过切换 .dark-theme 类来实现。
关键动画效果：
- 数字滚动：.digit-inner 与 transform: translateY 配合
- 高亮提示：.glow、.pulse 动画
- 等价物更新：.nudge 左右小幅摆动提醒用户注意

示例：

@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

⏳ 核心功能一：实时薪资计算与下班判断

薪资计算的公式：

日薪 = 月薪 / 工作天数
每小时薪资 = 日薪 / 当天工作时长
每秒薪资 = 每小时薪资 / 3600

然后根据当前时间计算已工作的秒数，实时更新：

function calculateCurrentSalary() {
    const now = new Date();
    const todayStr = now.toISOString().split('T')[0];
    const salaryData = JSON.parse(localStorage.getItem('salaryData') || '{}');

    const start = new Date(`${todayStr}T${salaryData.startTime}:00`);
    const end = new Date(`${todayStr}T${salaryData.endTime}:00`);

    // 已经下班
    if (now > end) {
        animateRollingNumber(dailySalary);
        updateEquivalentDisplay(dailySalary);
        stopCalculationWithCelebrate();
        return;
    }

    // 上班前
    if (now < start) {
        animateRollingNumber(0);
        return;
    }

    // 工作中
    const secondsWorked = (now - start) / 1000;
    const currentEarned = hourlyRate * (secondsWorked / 3600);
    animateRollingNumber(currentEarned);
    updateEquivalentDisplay(currentEarned);
}

亮点：

超过下班时间 → 立即停止计时器，锁定薪资在 dailySalary。
添加 🎉 庆祝提示，让页面更有趣味性。

🍜 核心功能二：等价物展示

将当前薪资换算成用户熟悉的消费品，提升观察体验：

const equivalents = [
    { name: "桶泡面", price: 4.5 },
    { name: "杯星巴克咖啡", price: 35 },
    // ...
];

function updateEquivalentDisplay(currentEarned) {
    equivalents.sort((a, b) => a.price - b.price);
    // 找到用户可以买到的最贵的物品
    for (let i = equivalents.length - 1; i >= 0; i--) {
        const count = Math.floor(currentEarned / equivalents[i].price);
        if (count > 0) {
            document.getElementById('equivalentText').textContent =
                `相当于 ${count} ${equivalents[i].name}`;
            break;
        }
    }
}

这样在工作过程中，你能看到“此刻可以买几杯咖啡 / 多少个汉堡”，让数据更直观有趣。

📊 核心功能三：历史记录与双轴图表

使用 LocalStorage 存储每日收入与进度。
最近 7 天数据用于双轴图表展示：
- 左轴：收入金额
- 右轴：进度百分比
- SVG 路径 绘制曲线 + 圆点标记

function generateDualAxisChart() {
    const history = getWorkHistory();
    const dates = Object.keys(history).sort().slice(-7);
    // 生成X/Y轴 & 绘制SVG线条
}

⏰ 核心功能四：倒计时与下班提醒

倒计时与薪资计算并行，每秒更新一次：

function startCountdown() {
    setInterval(() => {
        const now = new Date();
        const timeLeft = endToday - now;
        if (timeLeft > 0) {
            // 格式化显示
        } else {
            // 下班庆祝
        }
    }, 1000);
}

最后 1 小时内添加 urgent 动画，提醒用户快下班了。

💰 核心功能五：储蓄目标计算器

用户设定 目标金额 + 日期
根据历史收入统计已存金额
计算每日需存金额，显示储蓄进度条

function updateSavingsDisplay() {
    const percentage = (currentSavings / savingsTarget) * 100;
    document.getElementById('savingsProgressBar').style.width = percentage + '%';
}