2025实时收入小程序html代码分享-牛马打工人必备摸鱼工具
最近看抖音很火的一个小程序，索性博主就发出来分享一下源代码供大家游玩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>牛马打工人-摸鱼实时收入计算器</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>
body {
background-color: #f4f4f9;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
margin-top: 50px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
flex: 1;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.form-label {
font-weight: 600;
}
#output {
margin-top: 30px;
}
#output p {
font-size: 1.1rem;
}
.btn {
margin-right: 10px;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
}
/* 数据大屏容器样式 */
#dataScreen {
width: 100%;
height: 400px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
/* 实时收入大字体样式 */
#earnings {
font-size: 3rem;
color: #007bff;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>牛马打工人-摸鱼实时收入计算器</h1>
<form id="inputForm">
<div class="mb-3">
<label for="monthlySalary" class="form-label">月薪</label>
<input type="number" class="form-control" id="monthlySalary" placeholder="请输入月薪" required>
</div>
<div class="mb-3">
<label for="workingDays" class="form-label">每月工作天数</label>
<input type="number" class="form-control" id="workingDays" placeholder="请输入每月工作天数" required>
</div>
<div class="mb-3">
<label for="workingHours" class="form-label">每天工作小时数</label>
<input type="number" class="form-control" id="workingHours" placeholder="请输入每天工作小时数" required>
</div>
<button type="button" class="btn btn-primary" onclick="startCalculation()">开始计算</button>
<button type="button" class="btn btn-warning" onclick="pauseCalculation()">暂停</button>
<button type="button" class="btn btn-danger" onclick="resetCalculation()">重置</button>
</form>
<div id="output">
<p>工作时间: <span id="elapsedTime">00:00:00</span></p>
<p style="text-align: center;">实时收入: <span id="earnings">¥0.00</span></p>
<p>收入速率: <span id="ratePerHour">¥0.00/小时</span> | <span id="ratePerMinute">¥0.00/分钟</span> | <span
id="ratePerSecond">¥0.00/秒</span></p>
</div>
<!-- 数据大屏容器 -->
<div id="dataScreen"></div>
</div>
<footer>
@2025 实时收入计算器 Copyright <a href="https://tongsir.cn/" target="_blank">TongSir</a>
</footer>
<script>
let interval;
let startTime;
let paused = false;
let elapsedSeconds = 0;
let myChart;
function startCalculation() {
const monthlySalary = parseFloat(document.getElementById('monthlySalary').value);
const workingDays = parseFloat(document.getElementById('workingDays').value);
const workingHours = parseFloat(document.getElementById('workingHours').value);
if (isNaN(monthlySalary) || isNaN(workingDays) || isNaN(workingHours)) {
alert('请输入有效的数字');
return;
}
const hourlyRate = monthlySalary / (workingDays * workingHours);
const minuteRate = hourlyRate / 60;
const secondRate = minuteRate / 60;
document.getElementById('ratePerHour').textContent = `¥${hourlyRate.toFixed(2)}/小时`;
document.getElementById('ratePerMinute').textContent = `¥${minuteRate.toFixed(2)}/分钟`;
document.getElementById('ratePerSecond').textContent = `¥${secondRate.toFixed(2)}/秒`;
startTime = Date.now() - (elapsedSeconds * 1000);
interval = setInterval(() => {
if (!paused) {
elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
const earnings = elapsedSeconds * secondRate;
document.getElementById('elapsedTime').textContent = formatTime(elapsedSeconds);
document.getElementById('earnings').textContent = `¥${earnings.toFixed(2)}`;
// 更新数据大屏
updateDataScreen(elapsedSeconds, earnings);
}
}, 1000);
// 初始化数据大屏
initDataScreen();
}
function pauseCalculation() {
paused = !paused;
}
function resetCalculation() {
clearInterval(interval);
elapsedSeconds = 0;
document.getElementById('elapsedTime').textContent = '00:00:00';
document.getElementById('earnings').textContent = '¥0.00';
document.getElementById('ratePerHour').textContent = '¥0.00/小时';
document.getElementById('ratePerMinute').textContent = '¥0.00/分钟';
document.getElementById('ratePerSecond').textContent = '¥0.00/秒';
paused = false;
// 重置数据大屏
if (myChart) {
myChart.clear();
}
}
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
function initDataScreen() {
const dataScreen = document.getElementById('dataScreen');
myChart = echarts.init(dataScreen);
const option = {
title: {
text: '实时收入数据大屏',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: {
color: '#666'
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#666'
}
},
series: [
{
name: '实时收入',
type: 'line',
smooth: true,
itemStyle: {
color: '#007bff'
},
data: []
}
]
};
myChart.setOption(option);
}
function updateDataScreen(elapsedSeconds, earnings) {
if (myChart) {
const option = myChart.getOption();
const timeLabel = formatTime(elapsedSeconds);
option.xAxis[0].data.push(timeLabel);
if (option.xAxis[0].data.length > 10) {
option.xAxis[0].data.shift();
}
option.series[0].data.push(earnings);
if (option.series[0].data.length > 10) {
option.series[0].data.shift();
}
myChart.setOption(option);
}
}
</script>
</body>
</html>
空空如也！