141笔记今天老布发现一款好玩的小工具，名为实时收入计算器小工具。它不是普通的收入计算器，而是让你在工位上“看钱如流水”，一边摸鱼一边被工资数字狠狠抽醒的快乐小工具！
实时收入计算器小工具介绍
工具特色：
实时计时：你上班的每一秒都被记录，摸鱼都能算工龄。
实时收入：工资数字蹭蹭往上涨，老板看了都想加班。
收入速率：每小时、每分钟、每秒钟赚多少，明明白白，绝不糊涂账。
适用人群：
所有打工人、社畜、搬砖侠、摸鱼达人。
想知道自己一秒值多少钱的好奇宝宝。
需要一点“精神鞭策”的上班族。
想体验“被工资支配的恐惧”的朋友。
实时收入计算器小工具源代码
<!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: 440px;
margin: 60px auto;
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px #b0c4de44;
padding: 36px 32px 28px 32px;
text-align: center;
}
h2 {
color: #1976d2;
margin-bottom: 22px;
letter-spacing: 2px;
}
.input-row {
display: flex;
gap: 10px;
margin-bottom: 18px;
justify-content: center;
}
.input-row label {
flex: 1;
text-align: right;
color: #555;
font-size: 16px;
margin-right: 6px;
}
.input-row input {
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 {
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;
}
</style>
</head>
<body>
<div class="container">
<h2>实时收入计算器</h2>
<div class="tips">
请输入你的每月工资、每月上班天数、每天工作小时数，点击“开始上班”即可实时看到你的收入增长！
</div>
<div class="input-row">
<label for="salary">每月工资(元)：</label>
<input type="number" id="salary" min="0" placeholder="如 8000">
</div>
<div class="input-row">
<label for="days">每月上班天数：</label>
<input type="number" id="days" min="1" max="31" placeholder="如 22">
</div>
<div class="input-row">
<label for="hours">每天工作小时：</label>
<input type="number" id="hours" min="1" max="24" placeholder="如 8">
</div>
<button id="startBtn" onclick="startWork()">开始上班</button>
<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">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">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>
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;"><span style="color:#1976d2;">每小时收入速率：</span><strong id="rateHour" style="margin-left:8px; color:#d32f2f; font-size:18px;">0.0000 元</strong></div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;"><span style="color:#1976d2;">每分钟收入速率：</span><strong id="rateMin" style="margin-left:8px; color:#d32f2f; font-size:18px;">0.0000 元</strong></div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;"><span style="color:#1976d2;">每秒钟收入速率：</span><strong id="rateSec" style="margin-left:8px; color:#d32f2f; font-size:18px;">0.0000 元</strong></div>
</div>
</div>
</div>
<script>
let timer = null, startTimestamp = null;
let salary = 0, days = 0, hours = 0;
let rateHour = 0, rateMin = 0, rateSec = 0;
let isWorking = false;
function startWork() {
if (!isWorking) {
salary = parseFloat(document.getElementById('salary').value);
days = parseInt(document.getElementById('days').value);
hours = parseFloat(document.getElementById('hours').value);
if (!salary || !days || !hours) {
alert('请填写完整且有效的工资、天数和小时数！');
return;
}
// 计算速率
const totalSeconds = days * hours * 3600;
rateHour = salary / (days * hours);
rateMin = rateHour / 60;
rateSec = rateHour / 3600;
document.getElementById('rateHour').innerHTML = `<strong style="margin-left:8px; color:#d32f2f; font-size:18px;">${rateHour.toFixed(4)} 元</strong>`;
document.getElementById('rateMin').innerHTML = `<strong style="margin-left:8px; color:#d32f2f; font-size:18px;">${rateMin.toFixed(4)} 元</strong>`;
document.getElementById('rateSec').innerHTML = `<strong style="margin-left:8px; color:#d32f2f; font-size:18px;">${rateSec.toFixed(4)} 元</strong>`;
document.getElementById('startBtn').textContent = '上班中...';
isWorking = true;
startTimestamp = Date.now();
if (timer) clearInterval(timer);
timer = setInterval(updateIncome, 100);
} else {
// 结束计时
isWorking = false;
if (timer) clearInterval(timer);
document.getElementById('startBtn').textContent = '开始上班';
}
}
function updateIncome() {
const elapsed = (Date.now() - startTimestamp) / 1000;
const h = Math.floor(elapsed / 3600);
const m = Math.floor((elapsed % 3600) / 60);
const s = Math.floor(elapsed % 60);
document.getElementById('workTime').textContent = `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
const earned = elapsed * rateSec;
document.getElementById('earned').textContent = earned.toFixed(4);
}
</script>
</body>
</html>
