我一直負責在網頁上創建動態計算器。用動態數字創建「時間節省」計算器
它將包括以下內容：將通過後端（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