查看“︁Rol计算器”︁的源代码


<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROI计算器</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .calculator {
    max-width: 400px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  input[type="number"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 5px 0 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .button-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .button {
    width: calc(100% - 22px);
    padding: 10px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }
  .button:hover {
    background: #45a049;
  }
  .calculate-button {
    background: #007bff;
  }
  .calculate-button:hover {
    background: #0056b3;
  }
  #result {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
  }
</style>
</head>
<body>

<div class="calculator">
  <h2>ROI计算器</h2>
  <form id="roiForm">
    <label for="revenue">总收入（元）:</label>
    <input type="number" id="revenue" name="revenue" required><br>
    <div id="costInputs">
      <!-- Cost inputs will be dynamically added here -->
    </div>
    <div class="button-row">
      <input type="button" id="addCostBtn" value="添加成本" class="button">
      <input type="submit" value="计算" class="button calculate-button">
    </div>
  </form>
  <div id="result"></div>
</div>

<script>
document.getElementById('roiForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var revenue = parseFloat(document.getElementById('revenue').value);
    var totalCost = 0;
    var costInputs = document.querySelectorAll('.costInput');

    costInputs.forEach(function(costInput) {
      totalCost += parseFloat(costInput.value);
    });

    var roi = ((revenue - totalCost) / totalCost) * 100;

    document.getElementById('result').innerText = 'ROI: ' + roi.toFixed(2) + '%';
  });

document.getElementById('addCostBtn').addEventListener('click', function() {
    var costName = prompt('请输入成本名称:');
    if (costName === null || costName.trim() === '') {
      return; // If user cancels or leaves input empty, do nothing
    }
    var costValue = prompt('请输入成本金额（元）:');
    if (costValue === null || costValue.trim() === '' || isNaN(parseFloat(costValue))) {
      return; // If user cancels, leaves input empty, or inputs non-numeric value, do nothing
    }
    var costInputsContainer = document.getElementById('costInputs');
    var newCostInput = document.createElement('input');
    newCostInput.type = 'number';
    newCostInput.className = 'costInput';
    newCostInput.name = 'cost';
    newCostInput.placeholder = costName;
    newCostInput.value = parseFloat(costValue);
    costInputsContainer.appendChild(newCostInput);

    var costButton = document.createElement('input');
    costButton.type = 'button';
    costButton.className = 'costButton button';
    costButton.value = costName + ' (' + costValue + '元)';
    costButton.disabled = true;
    costButton.style.width = 'calc(100% - 22px)';
    costInputsContainer.appendChild(costButton);
  });
</script>

</body>


</html>
[[分类:在线工具集]]