下面是一个简单的网页代码示例,使用 HTML 和 JavaScript 来计算毛利率。你可以在本地创建一个 .html
文件,并将以下代码粘贴到其中,然后在浏览器中打开该文件来查看效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毛利率计算器</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input {
margin: 5px 0;
padding: 10px;
width: 200px;
}
button {
padding: 10px 15px;
cursor: pointer;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>毛利率计算器</h1>
<label for="revenue">收入 (销售额):</label><br>
<input type="number" id="revenue" placeholder="请输入收入"><br>
<label for="cost">成本:</label><br>
<input type="number" id="cost" placeholder="请输入成本"><br>
<button onclick="calculateGrossMargin()">计算毛利率</button>
<div class="result" id="result"></div>
<script>
function calculateGrossMargin() {
const revenue = parseFloat(document.getElementById('revenue').value);
const cost = parseFloat(document.getElementById('cost').value);
if (!isNaN(revenue) && !isNaN(cost) && revenue > 0) {
const grossMargin = ((revenue - cost) / revenue) * 100; // 毛利率百分比
document.getElementById('result').innerText = `毛利率为:${grossMargin.toFixed(2)}%`;
} else {
document.getElementById('result').innerText = '请确保输入有效的收入和成本。';
}
}
</script>
</body>
</html>
使用说明:
- 创建一个新的文本文件,将其命名为
gross_margin_calculator.html
。 - 将上面的代码复制并粘贴到该文件中。
- 用浏览器打开这个 HTML 文件。
- 输入你的收入和成本,然后点击“计算毛利率”按钮,你将看到结果显示在页面上。
如果你需要更复杂的功能或样式,请告诉我!
内容由零声教学AI助手提供,问题来源于学员提问