我一直负责在网页上创建动态计算器。用动态数字创建“时间节省”计算器
它将包括以下内容：将通过后端（WordPress的）输入
将会有几个计算改变页面上的数字。
我可以很容易地输出WP的数字，它只是我挣扎的第2和第3点。什么是最好的方法来解决这个问题？任何人都可以发布一些简单的例子，包含3点以上？
其中一个重要的元素是它必须重新计算数字 - 所以没有点击提交按钮或沿着这些线的任何东西。
点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 。
这里是一个简单的计算器，我只是扔在一起，从任何一个属性中找出圆的其他属性。它使用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>
感谢您的示例。我会看看我能从中解决什么问题。正在寻找一些简单的东西，比如+ b = c类的简单！用a =一个wordpress字段，b =一个输入，c =答案。全部完成，无需点击提交按钮或重新加载页面。 – Rob
@Rob请参阅编辑，使用更简单的示例。 – DaveRandom
干杯，今天我会在某个时刻给出一个答案。 – Rob
你究竟需要计算什么，你的价值是什么，你的价值会如何相互关联？这是一个相当简单的任务（这是一个JavaScript工作，相当明显），但不知道你有什么数字，用户将输入什么数字，应该显示什么结果，以及应该显示什么格式，有点难以进一步指导你... – DaveRandom
@DaveRandom感谢您的回复。目前，我只是在寻找例子，所以一些基本的计算和一些动态变化的基本输入将会很好，因为我可以进一步采取这些措施。我只是不知道从哪里开始。 – Rob