```html
body {
fontfamily: Arial, sansserif;
margin: 20px;
}
h1 {
textalign: center;
}
.calculator {
maxwidth: 400px;
margin: 0 auto;
border: 2px solid ccc;
padding: 20px;
borderradius: 10px;
}
.inputgroup {
marginbottom: 10px;
}
label {
display: block;
marginbottom: 5px;
}
input[type="number"] {
width: 100%;
padding: 8px;
borderradius: 5px;
border: 1px solid ccc;
}
button {
width: 100%;
padding: 10px;
backgroundcolor: 4CAF50;
color: white;
border: none;
borderradius: 5px;
cursor: pointer;
}
button:hover {
backgroundcolor: 45a049;
}
.result {
margintop: 20px;
}
function calculate() {
var initialInvestment = parseFloat(document.getElementById("initialInvestment").value);
var annualInterestRate = parseFloat(document.getElementById("annualInterestRate").value);
var investmentPeriod = parseFloat(document.getElementById("investmentPeriod").value);
var futureValue = initialInvestment * Math.pow(1 (annualInterestRate / 100), investmentPeriod);
var profit = futureValue initialInvestment;
document.getElementById("result").innerHTML = "未来价值: ¥" futureValue.toFixed(2) "
收益: ¥" profit.toFixed(2);
}