这是一个简单的计算器，我刚刚把它放在一起，它可以从任何一个属性中计算出圆的其他属性。它利用onkeyup 事件，因此值会在您键入时更新。它绝不是完美的（甚至对数学没有 100% 的把握），但这不是重点，重点是演示如何进行计算和实时更新显示，希望它能给你一个推动力正确的方向。
在这里详细解释太复杂了，所以请玩一下并提出具体问题，我会尽我所能回答......
更新代码
<html>
<head>
<title>Circle calculator</title>
<script type="text/javascript">
var radius, diameter, circumference, area, sphereVolume, lastRadius, lastDiameter, lastCircumference, lastArea, lastSphereVolume;
function updateDisplays () {
// This function updates the displayed values
document.getElementById('radius_input').value = (isNaN(radius)) ? '0.0' : ((radius.toString().split('.').length == 1) ? radius.toString()+'.0' : radius);
document.getElementById('diameter_input').value = (isNaN(diameter)) ? '0.0' : ((diameter.toString().split('.').length == 1) ? diameter.toString()+'.0' : diameter);
document.getElementById('circumference_input').value = (isNaN(circumference)) ? '0.0' : ((circumference.toString().split('.').length == 1) ? circumference.toString()+'.0' : circumference);
document.getElementById('area_input').value = (isNaN(area)) ? '0.0' : ((area.toString().split('.').length == 1) ? area.toString()+'.0' : area);
document.getElementById('spherevolume_input').value = (isNaN(sphereVolume)) ? '0.0' : ((sphereVolume.toString().split('.').length == 1) ? sphereVolume.toString()+'.0' : sphereVolume);
// Track the last values
lastRadius = (isNaN(radius)) ? 0 : radius;
lastDiameter = (isNaN(diameter)) ? 0 : diameter;
lastCircumference = (isNaN(circumference)) ? 0 : circumference;
lastArea = (isNaN(area)) ? 0 : area;
lastSphereVolume = (isNaN(sphereVolume)) ? 0 : sphereVolume;
}
window.onload = function () {
// All these functions calculate the other values based on the one that has changed
document.getElementById('radius_input').onkeyup = function () {
radius = parseFloat(this.value);
if (lastRadius == radius) {
return;
}
diameter = radius * 2;
circumference = Math.PI * diameter;
area = Math.PI * Math.pow(radius, 2);
sphereVolume = (4 / 3) * Math.PI * Math.pow(radius, 3);
updateDisplays();
};
document.getElementById('diameter_input').onkeyup = function () {
diameter = parseFloat(this.value);
if (lastDiameter == diameter) {
return;
}
radius = diameter / 2;
circumference = Math.PI * diameter;
area = Math.PI * Math.pow(radius, 2);
sphereVolume = (4 / 3) * Math.PI * Math.pow(radius, 3);
updateDisplays();
};
document.getElementById('circumference_input').onkeyup = function () {
circumference = parseFloat(this.value);
if (lastCircumference == circumference) {
return;
}
diameter = circumference / Math.PI;
radius = diameter / 2;
area = Math.PI * Math.pow(radius, 2);
sphereVolume = (4 / 3) * Math.PI * Math.pow(radius, 3);
updateDisplays();
};
document.getElementById('area_input').onkeyup = function () {
area = parseFloat(this.value);
if (lastArea == area) {
return;
}
radius = Math.sqrt(area / Math.PI);
diameter = radius * 2;
circumference = Math.PI * diameter;
sphereVolume = (4 / 3) * Math.PI * Math.pow(radius, 3);
updateDisplays();
};
document.getElementById('spherevolume_input').onkeyup = function () {
sphereVolume = parseFloat(this.value);
if (lastSphereVolume == sphereVolume) {
return;
}
radius = Math.pow((sphereVolume / Math.PI) * (3/4), 1/3);
diameter = radius * 2;
area = Math.PI * Math.pow(radius, 2);
circumference = Math.PI * diameter;
updateDisplays();
};
};
</script>
<style>
#title {
margin-bottom: 20px;
font-weight: bold;
}
td.property_name {
text-align: right;
padding-right: 10px;
}
td.property_formula {
padding-left: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="title">Circle Calculator</div>
<table>
<tr>
<td class="property_name">Radius:</td>
<td><input type="text" id="radius_input" value="0.0" /> cm</td>
<td class="property_formula"></td>
</tr>
<tr>
<td class="property_name">Diameter:</td>
<td><input type="text" id="diameter_input" value="0.0" /> cm</td>
<td class="property_formula">2r</td>
</tr>
<tr>
<td class="property_name">Circumference:</td>
<td><input type="text" id="circumference_input" value="0.0" /> cm</td>
<td class="property_formula">2πr</td>
</tr>
<tr>
<td class="property_name">Area:</td>
<td><input type="text" id="area_input" value="0.0" /> cm<sup>2</sup></td>
<td class="property_formula">πr<sup>2</sup></td>
</tr>
<tr>
<td class="property_name">Volume of Sphere:</td>
<td><input type="text" id="spherevolume_input" value="0.0" /> cm<sup>3</sup></td>
<td class="property_formula"><sup>4</sup>⁄<sub>3</sub>πr<sup>3</sup></td>
</tr>
</table>
</body>
</html>
编辑
一个更简单的例子，只做 1 次加法：
<html>
<head>
<title>Simple Calculator</title>
<script type="text/javascript">
window.onload = function () {
// All code here is executed once the document has finished loading
// Assign a function to num1's onkeyup event
document.getElementById('num1').onkeyup = function () {
// Declare the variables
var num1, num2;
// Get the values in variables with the correct type for calculations
num1 = parseFloat(this.value);
num2 = parseFloat(document.getElementById('num2').value);
// Update the answer display
document.getElementById('answer').innerHTML = num1 + num2;
};
// Assign a function to num2's onkeyup event
document.getElementById('num2').onkeyup = function () {
// Declare the variables
var num1, num2;
// Get the values in variables with the correct type for calculations
num1 = parseFloat(document.getElementById('num1').value);
num2 = parseFloat(this.value);
// Update the answer display
document.getElementById('answer').innerHTML = num1 + num2;
};
};
</script>
</head>
<body>
<input type="text" id="num1" size="4" value="0" /> + <input type="text" id="num2" size="4" value="0" /> = <span id="answer">0</span>
</body>
</html>