本帖最后由 gentlement3434 于 2025-6-12 18:37 编辑
附上代码，自己用txt文本复制进去然后改后缀为html即可，图个乐子。
有不符合逻辑的可以丢到ai里面继续优化。
[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 { background: linear-gradient(120deg, #e0e7ef 0%, #f8fafc 100%); min-height: 100vh; margin: 0; font-family: 'Segoe UI', 'PingFang SC', Arial, sans-serif; color: #222; } .container { max-width: 460px; margin: 60px auto; background: #fff; border-radius: 18px; box-shadow: 0 4px 24px #b0c4de44; padding: 36px 32px 28px 32px; text-align: center; position: relative; z-index: 1; } h2 { color: #1976d2; margin-bottom: 22px; letter-spacing: 2px; } .input-row { display: flex; gap: 10px; margin-bottom: 18px; justify-content: center; align-items: center; } .input-row label { flex: 1; text-align: right; color: #555; font-size: 16px; } .input-row input, .input-row select { flex: 2; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 17px; outline: none; transition: border 0.2s; } .input-row input:focus, .input-row select:focus { border: 1.5px solid #1976d2; } button { padding: 10px 28px; background: #1976d2; color: #fff; border: none; border-radius: 6px; font-size: 18px; cursor: pointer; margin-top: 10px; margin-bottom: 18px; transition: background 0.2s; } button:active { background: #0d47a1; } .result-area { background: #f1f8fe; border-radius: 10px; box-shadow: 0 1px 6px #1976d211; padding: 22px 10px 18px 10px; margin-top: 18px; font-size: 18px; color: #1976d2; min-height: 120px; } .result-area strong { font-size: 22px; color: #d32f2f; } .tips { background: #fffde7; color: #b26a00; border-radius: 6px; padding: 10px 14px; margin-bottom: 18px; font-size: 15px; text-align: left; box-shadow: 0 1px 4px #ffe0b244; } .section-title { color: #1976d2; font-weight: bold; margin: 20px 0 10px 0; text-align: left; font-size: 17px; } .deduction-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 16px; } .deduction-label { color: #555; } .deduction-value { color: #d32f2f; font-weight: bold; } .error { color: #d32f2f; font-size: 14px; text-align: left; margin-top: -15px; margin-bottom: 15px; } .blink { animation: blink 1s infinite; } @keyframes blink { 50% { opacity: 0.8; } } .leave-record { display: flex; flex-wrap: wrap; align-items: center; background: #f8fbff; border: 1px dashed #b0c4de; border-radius: 8px; padding: 10px; margin-bottom: 10px; position: relative; } .leave-record .input-row { width: 48%; margin: 5px 0; } .remove-leave-btn { position: absolute; top: 5px; right: 5px; padding: 2px 8px; font-size: 14px; background: #e57373; } .remove-leave-btn:hover { background: #d32f2f; } #addLeaveBtn { background: #64b5f6; padding: 6px 16px; font-size: 16px; width: 100%; margin-bottom: 18px; } #addLeaveBtn:hover { background: #42a5f5; } .time-input-group { display: flex; gap: 5px; align-items: center; } .time-input { width: 50px; text-align: center; } .time-separator { font-weight: bold; } .fish-tank { position: fixed; bottom: 0; left: 0; width: 100%; height: 200px; overflow: hidden; z-index: 0; pointer-events: none; } .fish-container { position: absolute; bottom: 0; left: 0; width: 150px; height: 100px; cursor: pointer; pointer-events: auto; } .fish { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } .fish svg { width: 100%; height: 100%; } .fish-bubble { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 5px 10px; font-size: 12px; color: #333; white-space: nowrap; opacity: 0; transition: opacity 0.3s; z-index: 10; pointer-events: none; } .fish-container:hover .fish-bubble, .fish-container.active .fish-bubble { opacity: 1; } @keyframes swim-left-right { 0% { transform: translateX(-10%) scaleX(1); } 50% { transform: translateX(10px) scaleX(1); } 100% { transform: translateX(110%) scaleX(1); } } @keyframes swim-right-left { 0% { transform: translateX(110%) scaleX(-1); } 50% { transform: translateX(-10px) scaleX(-1); } 100% { transform: translateX(-10%) scaleX(-1); } } @keyframes jump { 0%, 100% { transform: translate(0, 0) scaleX(1); } 10% { transform: translate(-20px, -20px) scaleX(1); } 20% { transform: translate(0, 0) scaleX(1); } 30% { transform: translate(-15px, -15px) scaleX(1); } 40% { transform: translate(0, 0) scaleX(1); } 50% { transform: translate(-10px, -10px) scaleX(1); } 60% { transform: translate(0, 0) scaleX(1); } 70% { transform: translate(-5px, -5px) scaleX(1); } 80%, 90% { transform: translate(0, 0) scaleX(1); } } .fish-container:nth-child(1) { width: 150px; height: 100px; left: 10%; animation: float 6s ease-in-out infinite; } .fish-container:nth-child(2) { width: 120px; height: 80px; left: 40%; animation: float 8s ease-in-out infinite; } .fish-container:nth-child(3) { width: 100px; height: 70px; left: 70%; animation: float 10s ease-in-out infinite; } <!-- .fish-container:hover, .fish-container.clicked { animation-name: jump; animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: forwards; }--> @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } </style> </head> <body> <div class="container"> <h2>实时收入计算器(按月计算)</h2> <div class="tips"> 请输入你的每月工资、每月上班天数、每天工作小时数，系统会自动计算从本月1日到当前时间你应得的收入。 </div> <div class="section-title">基本工资信息</div> <div class="input-row"> <label for="salary">每月工资(元)：</label> <input type="number" id="salary" min="0" placeholder="如 8000" value="8000"> </div> <div class="section-title">工作时间设置</div> <div class="input-row"> <label>上班时间：</label> <div class="time-input-group"> <input type="number" id="workStartHour" class="time-input" min="0" max="23" value="9" placeholder="时"> <span class="time-separator">:</span> <input type="number" id="workStartMinute" class="time-input" min="0" max="59" value="0" placeholder="分"> </div> </div> <div class="input-row"> <label>下班时间：</label> <div class="time-input-group"> <input type="number" id="workEndHour" class="time-input" min="0" max="23" value="18" placeholder="时"> <span class="time-separator">:</span> <input type="number" id="workEndMinute" class="time-input" min="0" max="59" value="0" placeholder="分"> </div> </div> <div class="input-row"> <label>午休时间(分钟)：</label> <input type="number" id="lunchBreak" min="0" max="240" value="60" placeholder="如 60"> </div> <div class="section-title">请假信息</div> <div id="leaveContainer"></div> <button type="button" id="addLeaveBtn">+ 添加请假记录</button> <div class="section-title">五险一金扣除</div> <div class="input-row"> <label for="insuranceRate">五险一金比例(%)：</label> <input type="number" id="insuranceRate" min="0" max="100" placeholder="如 20" value="20" step="0.1"> </div> <div class="section-title">个人所得税</div> <div class="input-row"> <label for="taxExpense">专项附加扣除(元)：</label> <input type="number" id="taxExpense" min="0" placeholder="如 1000" value="0"> </div> <button id="calculateBtn">计算收入</button> <div id="errorMsg" class="error"></div> <div class="result-area" id="resultArea"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;"> <span>本月已工作时间：</span> <strong id="workTime" class="blink">0天 00:00:00</strong> </div> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;"> <span>本月已赚到：</span> <span> <strong id="earned" class="blink">0.0000</strong> <span style="margin-left: 2px; color: #888; font-size: 15px;">元</span> </span> </div> <div style="border-top: 1px dashed #b0c4de; margin: 12px 0 10px 0;"></div> <div class="section-title" style="margin-top: 0;">收入明细</div> <div class="deduction-row"> <span class="deduction-label">每小时收入：</span> <span class="deduction-value" id="rateHour">0.00 元</span> </div> <div class="deduction-row"> <span class="deduction-label">每日收入：</span> <span class="deduction-value" id="rateDay">0.00 元</span> </div> <div class="deduction-row"> <span class="deduction-label">每日工作时间：</span> <span class="deduction-value" id="dailyWorkHours">0.00 小时</span> </div> <div class="deduction-row"> <span class="deduction-label">本月工作日数：</span> <span class="deduction-value" id="workDaysDisplay">0 天</span> </div> <div class="deduction-row"> <span class="deduction-label">请假扣减：</span> <span class="deduction-value" id="leaveDeduction">0.00 元</span> </div> <div class="deduction-row"> <span class="deduction-label">五险一金扣除：</span> <span class="deduction-value" id="insuranceDeduction">0.00 元</span> </div> <div class="deduction-row"> <span class="deduction-label">应纳税所得额：</span> <span class="deduction-value" id="taxableIncome">0.00 元</span> </div> <div class="deduction-row"> <span class="deduction-label">个人所得税：</span> <span class="deduction-value" id="incomeTax">0.00 元</span> </div> <div class="deduction-row" style="margin-top: 8px;"> <span class="deduction-label" style="font-weight: bold;">实际到手收入：</span> <span class="deduction-value" style="font-size: 20px;" id="netIncome">0.0000 元</span> </div> </div> </div> <!-- 摸鱼的小鱼 --> <div class="fish-tank"> <div class="fish-container fish-container1"> <div class="fish-bubble">来摸我呀</div> <div class="fish fish1"> <svg viewBox="0 0 200 100" xmlns="" fill="#FF6B6B"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#E63946"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> <div class="fish-container fish-container2"> <div class="fish-bubble">快来抓我啊</div> <div class="fish fish2"> <svg viewBox="0 0 200 100" xmlns="" fill="#457B9D"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#1D3557"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> <div class="fish-container fish-container3"> <div class="fish-bubble">加油努力，拉屎要用力~</div> <div class="fish fish3"> <svg viewBox="0 0 200 100" xmlns="" fill="#A8DADC"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#457B9D"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> <div class="fish-container fish-container4"> <div class="fish-bubble">最值得欣赏的风景，是自己奋斗的足迹。</div> <div class="fish fish3"> <svg viewBox="0 0 200 100" xmlns="" fill="#A8DADC"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#457B9D"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> <div class="fish-container fish-container5"> <div class="fish-bubble">路上总会有阴影，但抬头总能看见阳光。</div> <div class="fish fish3"> <svg viewBox="0 0 200 100" xmlns="" fill="#A8DADC"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#457B9D"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> <div class="fish-container fish-container6"> <div class="fish-bubble">Death is just a part of life, something we’re all destined to do.</div> <div class="fish fish3"> <svg viewBox="0 0 200 100" xmlns="" fill="#A8DADC"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#457B9D"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> <div class="fish-container fish-container7"> <div class="fish-bubble">我知道虚度年华不对，但是这样，真的好过瘾啊。</div> <div class="fish fish3"> <svg viewBox="0 0 200 100" xmlns="" fill="#A8DADC"> <path d="M130,50 C120,30 90,30 80,50 C90,70 120,70 130,50 Z"/> <path d="M80,50 L50,30 L60,50 L50,70 Z" fill="#457B9D"/> <circle cx="125" cy="45" r="3" fill="#000"/> </svg> </div> </div> </div> <script> // 2023年各月工作日数 const workDaysPerMonth2023 = { 0: 19, // 1月 1: 19, // 2月 2: 21, // 3月 3: 22, // 4月 4: 19, // 5月 5: 20, // 6月 6: 23, // 7月 7: 21, // 8月 8: 23, // 9月 9: 18, // 10月 10: 20, // 11月 11: 23 // 12月 }; // 全局变量存储计算结果 let currentData = { rateHour: 0, rateDay: 0, leaveDeduction: 0, insuranceDeduction: 0, incomeTax: 0, dailyWorkHours: 0, workDaysThisMonth: 0 }; // 初始化请假记录数组 let leaveRecords = []; document.addEventListener('DOMContentLoaded', function() { const calculateBtn = document.getElementById('calculateBtn'); calculateBtn.addEventListener('click', initCalculation); // 为所有输入框添加输入验证 const inputs = document.querySelectorAll('input[type="number"]'); inputs.forEach(input => { input.addEventListener('input', function() { validateInput(this); }); }); // 添加请假按钮事件 document.getElementById('addLeaveBtn').addEventListener('click', addLeaveRecord); // 初始加载时添加一个请假记录 addLeaveRecord(); // 给小鱼添加点击事件 document.querySelectorAll('.fish-container').forEach(fish => { fish.addEventListener('click', function(e) { handleFishClick(this); }); }); }); function validateInput(input) { const min = parseFloat(input.min) || 0; const max = parseFloat(input.max) || Infinity; let value = parseFloat(input.value) || 0; if (value < min) { input.value = min; } else if (value > max) { input.value = max; } } function addLeaveRecord() { const container = document.getElementById('leaveContainer'); const recordId = Date.now(); const recordHTML = ` <div class="leave-record" id="leave-${recordId}"> <div class="input-row"> <label title="此处的请假时间为实际请假小时数">请假小时数：</label> <input type="number" class="leave-hours" min="0" max="160" value="0"> </div> <div class="input-row"> <label>请假类型：</label> <select class="leave-type"> <option value="paid">带薪假</option> <option value="unpaid">无薪假</option> <option value="half">半薪假</option> </select> </div> <button type="button" class="remove-leave-btn">✖</button> </div> `; container.insertAdjacentHTML('beforeend', recordHTML); // 更新请假记录数组 leaveRecords.push({ id: recordId }); } function removeLeaveRecord(recordId) { const recordElement = document.getElementById(`leave-${recordId}`); if (recordElement) { recordElement.remove(); } // 从请假记录数组中移除 leaveRecords = leaveRecords.filter(record => record.id !== recordId); // 如果没有请假记录，添加一个空的 if (leaveRecords.length === 0) { addLeaveRecord(); } } function calculateLeaveDeductions(rateHour) { let totalDeduction = 0; let leaveElements = document.querySelectorAll('.leave-record'); leaveElements.forEach(record => { // 获取该请假记录的数据 const leaveType = record.querySelector('.leave-type').value; const hours = parseFloat(record.querySelector('.leave-hours').value) || 0; // 计算扣款 if (leaveType === 'unpaid' && hours > 0) { // 无薪假 totalDeduction += hours * rateHour; } else if (leaveType === 'half' && hours > 0) { // 半薪假 totalDeduction += hours * rateHour * 0.5; } // 带薪假不需要扣款 }); return totalDeduction; } function getChinaTime() { // 创建一个日期对象并设置为当前时间 const now = new Date(); // 创建一个新的日期对象，表示UTC时间 const utcDate = new Date(now.getTime() + now.getTimezoneOffset() * 60000); // 中国时区是 UTC+8，所以再加8小时 const chinaDate = new Date(utcDate.getTime() + 3600000 * 8); return chinaDate; } function calculateIncomeTax(monthlySalary, salaryAfterDeductions) { const taxFreeThreshold = 5000; // 起征点 const taxExpense = parseFloat(document.getElementById('taxExpense').value) || 0; // 专项附加扣除 // 计算应纳税所得额 = 实际薪资 - 起征点 - 专项附加扣除 const taxableIncome = Math.max(0, salaryAfterDeductions - taxFreeThreshold - taxExpense); // 七级超额累进税率表（含税率和速算扣除数） const taxBrackets = [ { upper: 3000, rate: 0.03, deduction: 0 }, { upper: 12000, rate: 0.10, deduction: 210 }, { upper: 25000, rate: 0.20, deduction: 1410 }, { upper: 35000, rate: 0.25, deduction: 2660 }, { upper: 55000, rate: 0.30, deduction: 4410 }, { upper: 80000, rate: 0.35, deduction: 7160 }, { upper: Infinity, rate: 0.45, deduction: 15160 } ]; // 查找适用的税率档次 let applicableBracket = taxBrackets[0]; for (const bracket of taxBrackets) { if (taxableIncome <= bracket.upper) { applicableBracket = bracket; break; } } const incomeTax = taxableIncome * applicableBracket.rate - applicableBracket.deduction; return { taxableIncome: taxableIncome, incomeTax: Math.max(0, incomeTax) // 避免负值 }; } // 计算每日工作时间(小时) function calculateDailyWorkHours() { const startHour = parseInt(document.getElementById('workStartHour').value) || 9; const startMinute = parseInt(document.getElementById('workStartMinute').value) || 0; const endHour = parseInt(document.getElementById('workEndHour').value) || 18; const endMinute = parseInt(document.getElementById('workEndMinute').value) || 0; const lunchBreak = parseInt(document.getElementById('lunchBreak').value) || 60; // 计算工作时间(分钟) let workMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute); // 减去午休时间 workMinutes -= lunchBreak; // 转换为小时 const workHours = workMinutes / 60; return workHours > 0 ? workHours : 0; } // 获取本月工作日数 function getWorkDaysThisMonth() { const now = getChinaTime(); const currentMonth = now.getMonth(); return workDaysPerMonth2023[currentMonth] || 22; // 默认22天 } // 计算从当前日期到月底的工作日数 function getRemainingWorkDaysThisMonth() { const now = getChinaTime(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth(); const currentDay = now.getDate(); // 获取本月最后一天 const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); // 计算剩余天数 let remainingDays = lastDayOfMonth - currentDay; // 简单估算剩余工作日数（实际应排除周末） // 这里简化处理，按比例计算 const totalWorkDays = getWorkDaysThisMonth(); const elapsedRatio = (currentDay - 1) / lastDayOfMonth; const elapsedWorkDays = Math.floor(totalWorkDays * elapsedRatio); return totalWorkDays - elapsedWorkDays; } function initCalculation() { // 获取用户输入 const salaryInput = document.getElementById('salary'); const errorMsg = document.getElementById('errorMsg'); const salary = parseFloat(salaryInput.value); const insuranceRate = parseFloat(document.getElementById('insuranceRate').value) || 0; // 验证输入 if (isNaN(salary) || salary <= 0) { errorMsg.textContent = '请输入有效的月工资！'; salaryInput.focus(); return; } // 获取本月工作日数 currentData.workDaysThisMonth = getWorkDaysThisMonth(); document.getElementById('workDaysDisplay').textContent = currentData.workDaysThisMonth + ' 天'; // 计算每日工作时间 currentData.dailyWorkHours = calculateDailyWorkHours(); if (currentData.dailyWorkHours <= 0) { errorMsg.textContent = '工作时间设置不正确，请检查上班时间和下班时间！'; return; } errorMsg.textContent = ''; // 计算收入速率 currentData.rateHour = salary / (currentData.workDaysThisMonth * currentData.dailyWorkHours); currentData.rateDay = salary / currentData.workDaysThisMonth; // 计算请假扣减 currentData.leaveDeduction = calculateLeaveDeductions(currentData.rateHour); // 计算五险一金扣除 currentData.insuranceDeduction = salary * (insuranceRate / 100); // 先计算应发工资 const salaryBeforeTax = salary - currentData.leaveDeduction - currentData.insuranceDeduction; // 计算个人所得税 const taxInfo = calculateIncomeTax(salary, salaryBeforeTax); currentData.taxableIncome = taxInfo.taxableIncome; currentData.incomeTax = taxInfo.incomeTax; // 显示各项数据 document.getElementById('rateHour').textContent = currentData.rateHour.toFixed(2) + ' 元'; document.getElementById('rateDay').textContent = currentData.rateDay.toFixed(2) + ' 元'; document.getElementById('dailyWorkHours').textContent = currentData.dailyWorkHours.toFixed(2) + ' 小时'; document.getElementById('leaveDeduction').textContent = currentData.leaveDeduction.toFixed(2) + ' 元'; document.getElementById('insuranceDeduction').textContent = currentData.insuranceDeduction.toFixed(2) + ' 元'; document.getElementById('taxableIncome').textContent = currentData.taxableIncome.toFixed(2) + ' 元'; document.getElementById('incomeTax').textContent = currentData.incomeTax.toFixed(2) + ' 元'; // 立即执行一次计算 updateRealTimeIncome(); // 设置定时器每秒更新 if (window.updateInterval) clearInterval(window.updateInterval); window.updateInterval = setInterval(updateRealTimeIncome, 1000); } function updateRealTimeIncome() { // 获取中国时区当前日期和时间 const now = getChinaTime(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth(); const currentDay = now.getDate(); const currentHour = now.getHours(); const currentMinute = now.getMinutes(); const currentSecond = now.getSeconds(); // 获取本月工作日数 const totalWorkDays = currentData.workDaysThisMonth; // 获取本月最后一天 const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); // 计算已过去的工作日比例 const elapsedRatio = (currentDay - 1) / lastDayOfMonth; const elapsedWorkDays = Math.floor(totalWorkDays * elapsedRatio); // 获取工作时间设置 const workStartHour = parseInt(document.getElementById('workStartHour').value) || 9; const workStartMinute = parseInt(document.getElementById('workStartMinute').value) || 0; const lunchBreak = parseInt(document.getElementById('lunchBreak').value) || 60; // 计算今日已工作时间(秒) let todayWorkedSeconds = 0; // 如果当前时间在上班时间之后 if (currentHour > workStartHour || (currentHour === workStartHour && currentMinute >= workStartMinute)) { // 计算今日工作时间(分钟) let todayWorkMinutes = (currentHour * 60 + currentMinute) - (workStartHour * 60 + workStartMinute); // 减去午休时间(如果已经过了午休时间) const lunchStartHour = workStartHour + Math.floor((currentData.dailyWorkHours * 60 + lunchBreak) / 120); if (currentHour > lunchStartHour || (currentHour === lunchStartHour && currentMinute >= 0)) { todayWorkMinutes = Math.max(0, todayWorkMinutes - lunchBreak); } // 转换为秒 todayWorkedSeconds = todayWorkMinutes * 60 + currentSecond; // 不能超过每日工作时间 const dailyWorkSeconds = currentData.dailyWorkHours * 3600; todayWorkedSeconds = Math.min(todayWorkedSeconds, dailyWorkSeconds); } // 计算本月已工作时间(秒) const workedSeconds = elapsedWorkDays * currentData.dailyWorkHours * 3600 + todayWorkedSeconds; // 转换为天、小时、分钟、秒 const workedDays = Math.floor(workedSeconds / (currentData.dailyWorkHours * 3600)); const remainingSeconds = workedSeconds % (currentData.dailyWorkHours * 3600); const workedHours = Math.floor(remainingSeconds / 3600); const workedMinutes = Math.floor((remainingSeconds % 3600) / 60); const workedSecs = Math.floor(remainingSeconds % 60); // 显示已工作时间 document.getElementById('workTime').textContent = `${workedDays}天 ${workedHours.toString().padStart(2,'0')}:${workedMinutes.toString().padStart(2,'0')}:${workedSecs.toString().padStart(2,'0')}`; // 计算本月总工作时间(秒) const totalWorkSeconds = totalWorkDays * currentData.dailyWorkHours * 3600; // 计算已赚金额(按比例计算) const salary = parseFloat(document.getElementById('salary').value); const earned = (workedSeconds / totalWorkSeconds) * salary; // 计算实际到手收入 const netIncome = Math.max(0, earned - currentData.leaveDeduction - currentData.insuranceDeduction - currentData.incomeTax); // 显示实时计算结果，精确到小数点后4位 document.getElementById('earned').textContent = earned.toFixed(4); document.getElementById('netIncome').textContent = netIncome.toFixed(4) + ' 元'; } function handleFishClick(fishElement) { // 添加点击动画类 fishElement.classList.add('clicked'); // 随机生成新的位置 const newX = Math.random() * (window.innerWidth - 150); const newY = Math.random() * 50 + 20; // 改变方向 const scale = Math.random() > 0.5 ? -1 : 1; // 应用新位置和方向 fishElement.style.left = newX + 'px'; fishElement.style.bottom = newY + 'px'; fishElement.style.transform = `scaleX(${scale})`; // 设置气泡文本 const defaultBubbles = [ "我这人从来不记仇，一般有仇当场就报了。", "没有你想不到，只有你做不到……", "万事开头难，然后中间难，最后结尾难！", "今晚吃鱼吧，我看你挺会挑刺的。", "不要就是不要，要学会大声说出口，这样才能保护你自己。", "当我站在瀑布前，觉得非常的难过，我总觉得，应该是两个人站在这里。" ]; const bubbleText = defaultBubbles[Math.floor(Math.random() * defaultBubbles.length)]; const bubble = fishElement.querySelector('.fish-bubble'); if (bubble) { bubble.textContent = bubbleText; } // 0.5秒后恢复动画 setTimeout(() => { fishElement.classList.remove('clicked'); }, 500); } // 页面加载完成后初始化小鱼点击事件 window.addEventListener('load', () => { document.querySelectorAll('.fish-container').forEach(fish => { // 点击事件 fish.addEventListener('click', function (e) { e.stopPropagation(); handleFishClick(this); }); // 鼠标进入 fish.addEventListener('mouseenter', () => { if (!fish.classList.contains('clicked')) { fish.style.transition = 'transform 0.3s ease'; // 可选过渡 fish.style.transform = 'scale(1.05)'; } }); // 鼠标离开 fish.addEventListener('mouseleave', () => { if (!fish.classList.contains('clicked')) { fish.style.transform = ''; } }); }); }); </script> </body> </html>
