我的任务是在网页上创建动态计算器。
它将包含以下内容：
将会有一些计算更改页面上的数字。
我可以很容易地从WP中输出数据，这只是我正在努力的第2点和第3点。什么是最好的方法来解决这个问题？任何人都可以发布一些包含上述3点的简单例子吗？
一个重要因素是它必须动态重新计算数字 - 所以不要点击提交按钮或沿着这些行的任何内容。
答案 0 :(得分：1)
第1点
<script>
var unitPrice = <?php echo $unitPrice; ?>;
...
</script>
第2点
<input type="text" id="quantity" onkeyup="updateTotal();/>
第3点
<span id="totalPrice"></span>
<script>
function updateTotal() {
var quantity = parseInt(document.getElementById('quantity').value, 10);
if(isNaN(quantity)) quantity = 0;
var totalPrice = unitPrice * quantity;
document.getElementById('totalPrice').innerText = totalPrice;
}
</script>
演示here。
答案 1 :(得分：0)
这是一个简单的计算器，我只是把它放在一起，从任何一个属性中得出一个圆的其他属性。它使用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>
修改
一个更简单的例子，只做了一次补充：
<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>