<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>欠薪计算器 - 维护您的劳动权益</title>
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
}
|
|
body {
|
background-color: #f5f7fa;
|
color: #333;
|
line-height: 1.6;
|
padding: 20px;
|
}
|
|
.container {
|
max-width: 1000px;
|
margin: 0 auto;
|
background: white;
|
border-radius: 12px;
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
|
overflow: hidden;
|
}
|
|
header {
|
background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
|
color: white;
|
padding: 25px 30px;
|
text-align: center;
|
}
|
|
header h1 {
|
font-size: 2.2rem;
|
margin-bottom: 10px;
|
}
|
|
header p {
|
opacity: 0.9;
|
font-size: 1.1rem;
|
}
|
|
.calculator-wrapper {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0;
|
}
|
|
.input-section {
|
flex: 1;
|
min-width: 300px;
|
padding: 30px;
|
background-color: #f9fbfd;
|
}
|
|
.result-section {
|
flex: 1;
|
min-width: 300px;
|
padding: 30px;
|
background-color: white;
|
border-left: 1px solid #eaeaea;
|
}
|
|
.section-title {
|
font-size: 1.4rem;
|
margin-bottom: 25px;
|
color: #1e5799;
|
padding-bottom: 10px;
|
border-bottom: 2px solid #eaeaea;
|
display: flex;
|
align-items: center;
|
}
|
|
.section-title i {
|
margin-right: 10px;
|
}
|
|
.form-group {
|
margin-bottom: 20px;
|
}
|
|
label {
|
display: block;
|
margin-bottom: 8px;
|
font-weight: 600;
|
color: #444;
|
}
|
|
input, select {
|
width: 100%;
|
padding: 12px 15px;
|
border: 1px solid #d0d7e2;
|
border-radius: 6px;
|
font-size: 1rem;
|
transition: border 0.3s;
|
}
|
|
input:focus, select:focus {
|
border-color: #1e5799;
|
outline: none;
|
box-shadow: 0 0 0 3px rgba(30, 87, 153, 0.1);
|
}
|
|
.date-range-container {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.date-range-container input {
|
flex: 1;
|
}
|
|
.date-separator {
|
color: #666;
|
font-weight: bold;
|
}
|
|
.hint {
|
font-size: 0.85rem;
|
color: #666;
|
margin-top: 5px;
|
font-style: italic;
|
}
|
|
.button-group {
|
display: flex;
|
gap: 15px;
|
margin-top: 30px;
|
}
|
|
button {
|
flex: 1;
|
padding: 14px;
|
border: none;
|
border-radius: 6px;
|
font-size: 1.05rem;
|
font-weight: 600;
|
cursor: pointer;
|
transition: all 0.3s;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
button i {
|
margin-right: 8px;
|
}
|
|
.calculate-btn {
|
background-color: #1e5799;
|
color: white;
|
}
|
|
.calculate-btn:hover {
|
background-color: #17467e;
|
transform: translateY(-2px);
|
}
|
|
.reset-btn {
|
background-color: #f0f3f9;
|
color: #555;
|
}
|
|
.reset-btn:hover {
|
background-color: #e1e7f1;
|
}
|
|
.result-box {
|
background-color: #f8fafd;
|
border-radius: 8px;
|
padding: 25px;
|
margin-bottom: 30px;
|
border: 1px solid #e1e8f0;
|
}
|
|
.result-item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
padding-bottom: 15px;
|
border-bottom: 1px dashed #dce4ef;
|
}
|
|
.result-item:last-child {
|
border-bottom: none;
|
margin-bottom: 0;
|
padding-bottom: 0;
|
}
|
|
.result-label {
|
font-weight: 600;
|
color: #555;
|
}
|
|
.result-value {
|
font-weight: 700;
|
color: #1e5799;
|
font-size: 1.2rem;
|
}
|
|
.total {
|
background-color: #eef5ff;
|
padding: 15px;
|
border-radius: 6px;
|
margin-top: 10px;
|
}
|
|
.total .result-value {
|
font-size: 1.5rem;
|
color: #d32f2f;
|
}
|
|
.legal-notice {
|
background-color: #fff8e1;
|
border-left: 4px solid #ffc107;
|
padding: 20px;
|
margin-top: 30px;
|
border-radius: 4px;
|
}
|
|
.legal-notice h3 {
|
color: #856404;
|
margin-bottom: 10px;
|
}
|
|
.legal-notice p {
|
margin-bottom: 10px;
|
color: #664d03;
|
}
|
|
footer {
|
text-align: center;
|
padding: 20px;
|
color: #666;
|
font-size: 0.9rem;
|
border-top: 1px solid #eee;
|
background-color: #f9fbfd;
|
}
|
|
@media (max-width: 768px) {
|
.calculator-wrapper {
|
flex-direction: column;
|
}
|
|
.result-section {
|
border-left: none;
|
border-top: 1px solid #eaeaea;
|
}
|
|
.button-group {
|
flex-direction: column;
|
}
|
|
.date-range-container {
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.date-separator {
|
display: none;
|
}
|
}
|
</style>
|
</head>
|
<body>
|
<div class="container">
|
|
|
<div class="calculator-wrapper">
|
<div class="input-section">
|
<h2 class="section-title"><i class="fas fa-edit"></i> 填写欠薪信息</h2>
|
|
<div class="form-group">
|
<label for="salary">月平均工资（元）</label>
|
<input type="number" id="salary" min="0" step="100" placeholder="请输入您的月平均工资" value="8000">
|
<div class="hint">请输入税前月平均工资，包括奖金、津贴等</div>
|
</div>
|
|
<div class="form-group">
|
<label for="unpaidMonths">欠薪月数</label>
|
<input type="number" id="unpaidMonths" min="0" step="0.5" placeholder="请输入欠薪月数" value="3">
|
<div class="hint">可输入小数，如2.5个月</div>
|
</div>
|
|
<div class="form-group">
|
<label for="overtimeHours">每月平均加班时长（小时）</label>
|
<input type="number" id="overtimeHours" min="0" step="1" placeholder="请输入每月平均加班时长" value="30">
|
<div class="hint">按劳动法规定，加班费按小时工资的150%计算</div>
|
</div>
|
|
<div class="form-group">
|
<label for="compensationType">经济补偿金类型</label>
|
<select id="compensationType">
|
<option value="0">无需支付经济补偿金</option>
|
<option value="0.5">工作不满半年，支付半个月工资</option>
|
<option value="1" selected>工作半年以上，支付一个月工资</option>
|
<option value="n">N个月工资（根据工作年限）</option>
|
</select>
|
<div class="hint">根据《劳动合同法》第四十六条规定</div>
|
</div>
|
|
<div class="form-group" id="yearsOfWorkGroup" style="display: none;">
|
<label for="yearsOfWork">工作年限（年）</label>
|
<input type="number" id="yearsOfWork" min="0" step="0.5" placeholder="请输入工作年限" value="3">
|
<div class="hint">工作满6个月不满1年按1年计算，不满6个月按半年计算</div>
|
</div>
|
|
<div class="form-group">
|
<label for="unpaidDuration">欠薪持续时间</label>
|
<div class="date-range-container">
|
<input type="date" id="startDate" value="2025-10-15">
|
<span class="date-separator">至</span>
|
<input type="date" id="endDate" value="2026-01-15">
|
</div>
|
<div class="hint">用于计算滞纳金，请选择欠薪的起始和结束日期</div>
|
</div>
|
|
<div class="button-group">
|
<button class="calculate-btn" id="calculateBtn">
|
<i class="fas fa-calculator"></i> 计算欠薪总额
|
</button>
|
<button class="reset-btn" id="resetBtn">
|
<i class="fas fa-redo"></i> 重置数据
|
</button>
|
</div>
|
</div>
|
|
<div class="result-section">
|
<h2 class="section-title"><i class="fas fa-chart-bar"></i> 计算结果</h2>
|
|
<div class="result-box">
|
<div class="result-item">
|
<span class="result-label">基本欠薪总额：</span>
|
<span class="result-value" id="basicUnpaid">0.00 元</span>
|
</div>
|
|
<div class="result-item">
|
<span class="result-label">加班费总额：</span>
|
<span class="result-value" id="overtimeUnpaid">0.00 元</span>
|
</div>
|
|
<div class="result-item">
|
<span class="result-label">经济补偿金：</span>
|
<span class="result-value" id="compensation">0.00 元</span>
|
</div>
|
|
<div class="result-item">
|
<span class="result-label">滞纳金（估算）：</span>
|
<span class="result-value" id="lateFee">0.00 元</span>
|
</div>
|
|
<div class="result-item total">
|
<span class="result-label">欠薪总计：</span>
|
<span class="result-value" id="totalUnpaid">0.00 元</span>
|
</div>
|
</div>
|
|
<div class="legal-notice">
|
<h3><i class="fas fa-gavel"></i> 法律提示</h3>
|
<p>1. 根据《劳动法》第五十条规定，工资应当以货币形式按月支付给劳动者本人，不得克扣或者无故拖欠。</p>
|
<p>2. 用人单位拖欠工资的，劳动行政部门可责令支付工资、经济补偿金，并可责令支付赔偿金。</p>
|
<p>3. 本计算结果仅供参考，具体金额以劳动仲裁或法院判决为准。</p>
|
<p>4. 如遇欠薪问题，请及时向当地劳动监察部门投诉或申请劳动仲裁。</p>
|
</div>
|
</div>
|
</div>
|
|
<footer>
|
<p>© 欠薪计算器 | 本工具仅供参考，不构成法律建议 | 数据在本地计算，不会上传到服务器</p>
|
</footer>
|
</div>
|
|
<script>
|
// DOM元素获取
|
const salaryInput = document.getElementById('salary');
|
const unpaidMonthsInput = document.getElementById('unpaidMonths');
|
const overtimeHoursInput = document.getElementById('overtimeHours');
|
const compensationTypeSelect = document.getElementById('compensationType');
|
const yearsOfWorkGroup = document.getElementById('yearsOfWorkGroup');
|
const yearsOfWorkInput = document.getElementById('yearsOfWork');
|
const startDateInput = document.getElementById('startDate');
|
const endDateInput = document.getElementById('endDate');
|
const calculateBtn = document.getElementById('calculateBtn');
|
const resetBtn = document.getElementById('resetBtn');
|
|
// 结果元素
|
const basicUnpaidEl = document.getElementById('basicUnpaid');
|
const overtimeUnpaidEl = document.getElementById('overtimeUnpaid');
|
const compensationEl = document.getElementById('compensation');
|
const lateFeeEl = document.getElementById('lateFee');
|
const totalUnpaidEl = document.getElementById('totalUnpaid');
|
|
// 设置默认日期范围（3个月）
|
function setDefaultDateRange() {
|
const today = new Date();
|
const threeMonthsAgo = new Date(today);
|
threeMonthsAgo.setMonth(today.getMonth() - 3);
|
|
// 格式化开始日期（3个月前）
|
const startYear = threeMonthsAgo.getFullYear();
|
const startMonth = String(threeMonthsAgo.getMonth() + 1).padStart(2, '0');
|
const startDay = String(threeMonthsAgo.getDate()).padStart(2, '0');
|
|
// 格式化结束日期（今天）
|
const endYear = today.getFullYear();
|
const endMonth = String(today.getMonth() + 1).padStart(2, '0');
|
const endDay = String(today.getDate()).padStart(2, '0');
|
|
startDateInput.value = `${startYear}-${startMonth}-${startDay}`;
|
endDateInput.value = `${endYear}-${endMonth}-${endDay}`;
|
}
|
|
// 页面加载时设置默认日期范围
|
window.addEventListener('DOMContentLoaded', setDefaultDateRange);
|
|
// 经济补偿金类型改变时的处理
|
compensationTypeSelect.addEventListener('change', function() {
|
if (this.value === 'n') {
|
yearsOfWorkGroup.style.display = 'block';
|
} else {
|
yearsOfWorkGroup.style.display = 'none';
|
}
|
});
|
|
// 计算函数
|
function calculateUnpaidSalary() {
|
// 获取输入值
|
const salary = parseFloat(salaryInput.value) || 0;
|
const unpaidMonths = parseFloat(unpaidMonthsInput.value) || 0;
|
const overtimeHours = parseFloat(overtimeHoursInput.value) || 0;
|
const compensationType = compensationTypeSelect.value;
|
const yearsOfWork = parseFloat(yearsOfWorkInput.value) || 0;
|
|
// 获取日期范围
|
const startDate = new Date(startDateInput.value);
|
const endDate = new Date(endDateInput.value);
|
|
// 确保结束日期不小于开始日期
|
if (endDate < startDate) {
|
alert("结束日期不能早于开始日期，已自动调整");
|
endDateInput.value = startDateInput.value;
|
return calculateUnpaidSalary();
|
}
|
|
// 计算基本欠薪
|
const basicUnpaid = salary * unpaidMonths;
|
|
// 计算加班费（按小时工资的150%计算）
|
const hourlyWage = salary / 21.75 / 8; // 月平均工资 / 月平均工作日 / 每天8小时
|
const overtimeUnpaid = hourlyWage * 1.5 * overtimeHours * unpaidMonths;
|
|
// 计算经济补偿金
|
let compensation = 0;
|
if (compensationType === 'n') {
|
compensation = salary * yearsOfWork;
|
} else {
|
compensation = salary * parseFloat(compensationType);
|
}
|
|
// 计算滞纳金（按日利率0.05%估算）
|
const daysDiff = Math.max(0, Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24)));
|
const lateFee = basicUnpaid * 0.0005 * daysDiff;
|
|
// 计算总计
|
const totalUnpaid = basicUnpaid + overtimeUnpaid + compensation + lateFee;
|
|
// 更新显示结果
|
basicUnpaidEl.textContent = basicUnpaid.toFixed(2) + ' 元';
|
overtimeUnpaidEl.textContent = overtimeUnpaid.toFixed(2) + ' 元';
|
compensationEl.textContent = compensation.toFixed(2) + ' 元';
|
lateFeeEl.textContent = lateFee.toFixed(2) + ' 元';
|
totalUnpaidEl.textContent = totalUnpaid.toFixed(2) + ' 元';
|
|
return {
|
basicUnpaid,
|
overtimeUnpaid,
|
compensation,
|
lateFee,
|
totalUnpaid,
|
daysDiff
|
};
|
}
|
|
// 重置函数
|
function resetForm() {
|
salaryInput.value = '8000';
|
unpaidMonthsInput.value = '3';
|
overtimeHoursInput.value = '30';
|
compensationTypeSelect.value = '1';
|
yearsOfWorkGroup.style.display = 'none';
|
yearsOfWorkInput.value = '3';
|
setDefaultDateRange();
|
|
// 重置结果
|
basicUnpaidEl.textContent = '0.00 元';
|
overtimeUnpaidEl.textContent = '0.00 元';
|
compensationEl.textContent = '0.00 元';
|
lateFeeEl.textContent = '0.00 元';
|
totalUnpaidEl.textContent = '0.00 元';
|
}
|
|
// 事件监听
|
calculateBtn.addEventListener('click', calculateUnpaidSalary);
|
resetBtn.addEventListener('click', resetForm);
|
|
// 当日期变化时自动计算
|
startDateInput.addEventListener('change', calculateUnpaidSalary);
|
endDateInput.addEventListener('change', calculateUnpaidSalary);
|
|
// 初始计算
|
calculateUnpaidSalary();
|
</script>
|
</body>
|
</html>
|
