2024年4月9日 (二) 16:27 FC

2024-04-09T16:27:17Z

新页面

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

</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>
[[分类:在线工具集]]

Rol计算器 - 版本历史

2024年4月9日 (二) 16:27 FC