牛马收入计算器（源代码）

【代码】牛马收入计算器（源代码）

procedure rabbit

420人浏览 · 2025-06-25 14:36:57

procedure rabbit · 2025-06-25 14:36:57 发布

<!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="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>