我正在尝试制作：
- 3个输入框
- 取输入值并与某个百分比进行比较
如果值彼此在3%以内。输出=某物else输出其他内容。
如有任何帮助，我们将不胜感激。
首先创建在基本级别上看起来像这样的输入：
<input type="text" width="3em">
这将创建一个单独的输入标记。因此，放置三个，或者无论放置多少个，都将创建输入。现在，我们需要一种方法来获得我们刚刚创建的输入。要做到这一点，我们需要一些JavaScript。
document.getElementsByTagName("input");
这将使我们所有的输入标签都显示在屏幕上。现在，我们可以通过这些标签进行迭代器，并获得我们需要的数据，我将把这些数据放入数组中。
注意：每个输入标记都有一个名为value的属性，该属性存储放置在输入内部的字符串，可以通过在前面放置+将其更改为数字。
var numbers = [],
inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; ++i)
{
var number = +inputs[i].value;
// Makes sure that a number is there.
if(!isNaN(number))
numbers.push(number);
}
既然我们已经把所有东西都放在一个数组中了，是时候做一些数学运算了！
让我们看一个简单的例子，比较一个特定数字与另一个数字的百分比。如果给我们7和3，它们相距多远？首先我们找到平均值->(7 + 3) / 2，然后我们找到|3 - 7|之间的差，然后我们用差除以平均值。。。4 / 5 = .8。耶！但是，三个数字呢？好吧，现在我们必须在每个数字之间这样做。。。然后我们检查每一个，看看是否在范围内。哎哟！要做到这一点，它将需要一个嵌入的for循环。
因此，我们需要嵌入一个for循环，这样我们就不会重复比较。就像下面一样：
numbers => 1 2 3 4
Compare 1 -> 2, 1 -> 3, 1 -> 4
Compare 2 -> 3, 2 -> 4
Compare 3 -> 4
Stop!
这让我陷入了困境：
var inrange = true,
tolerance = 3/*In percentage!*/;
for(var i = 0; i < numbers.length && inrange; ++i)
for(var j = i + 1; j < numbers.length && inrange; ++j)
{
var diff = (numbers[i] - numbers[j]),
// Need to make sure diff is positive. Could use Math.abs...
pdiff = 2 * (diff < 0 ? -1*diff : diff)
/ (numbers[i] + numbers[j]);
// If false will cause the loops to stop.
inrange = (100 * pdiff) <= tolerance;
}
有了计算功能，我们现在可以专注于显示器了！
现在，我们需要一个按钮，它将调用一个函数并为我们表演魔术！这也可以通过input标记来完成，但需要更改其类型。
<input type="submit" value="calculate" onclick="calculate()">
所以，现在我们需要一种显示。。。一个非常简单的方法是使用带有id的<p>标签。
<p id="display"></p>
为了获得这个标签，我们还可以使用一些JavaScript。
document.getElementById("display");
这些标签有一个名为innerHTML的属性，我们可以在其中进行编辑。。。，更改内部HTML。
var p = document.getElementById("display");
p.innerHTML = "Hello World!";
现在，我们可以将上面的一切结合起来得到：
<input type="text" width="3em">
<input type="text" width="3em">
<input type="text" width="3em">
<input type="submit" value="calculate" onclick="calculate()">
<p id="display"></p>
<p id="results"></p>
<script>
// The tolerance for the numbers to be within.
var tolerance = 3,
// The number of inputs expected.
amount = 3;
function calculate() {
var numbers = [],
inputs = document.getElementsByTagName("input");
// Gets all of the numbers.
for(var i = 0; i < inputs.length; ++i)
// Need to check type to make sure not getting the button.
if(inputs[i].type === "text"){
var number = +inputs[i].value;
if(!isNaN(number))
numbers.push(number);
}
// Need to make sure the correct amount of inputs were found.
if(numbers.length !== amount) return;
var inrange = true,
// Gets the results p tag.
results = document.getElementById("results");
// Clear old results.
results.innerHTML = "";
// Compares each number finding the avg percent difference.
for(var i = 0; i < numbers.length && inrange; ++i)
for(var j = i + 1; j < numbers.length && inrange; ++j) {
var diff = (numbers[i] - numbers[j]),
pdiff = 2 * (diff < 0 ? -1*diff : diff)
/ (numbers[i] + numbers[j]);
inrange = (100 * pdiff) <= tolerance;
results.innerHTML += "Input " + (i+1) + " to " + (j+1)
+ ": " + (100 * pdiff) + " " + (inrange ? "<=" : ">") + " " + tolerance
+ " <br>";
}
// Gets the display tag.
var p = document.getElementById("display");
// Makes sure that within tolerance!
if(inrange)
p.innerHTML = "Within tolerance!";
else
p.innerHTML = "Try again...";
}
</script>我用来限制显示的位数的函数，其中x是数字，n是位数。这可以用于显示结果。要使用，只需取results.innerHTML += ... + (100 * pdiff) + ...并放置函数results.innerHTML += ... + limit_decimal(100 * pdiff, #) + ...，其中#是所需的小数位数。
function limit_decimal(x, n) {
// Makes sure it is a number.
if(isNaN(x = +x)) return x;
// If n is not a number then set to zero.
isNaN(n = +n) && (n = 0);
// Makes x a string.
var s = x + "",
// Split the string up by the decimal.
parts = s.split(".");
// Return the first part if n is zero.
if(n === 0) return parts[0];
// If just the first part, place zeros.
if(parts.length === 1)
{
s += ".";
for(var i = 0; i < n; ++i)
s += "0";
return s;
}
// If not, then get the length.
var l = parts[1].length;
// If the length is larger than n, remove those.
if(l >= n)
{
return parts[0] + "." + parts[1].slice(0,n);
}
// Else, add zeros to fit the length.
for(var i = 0; i < n - l; ++i)
s+="0";
return s;
}
下面是一个可以从中派生逻辑的代码示例。
https://jsfiddle.net/1u4c0jzj/
<input type="text" id="value1" />
<input type="text" id="value2" />
<input type="text" id="value3" />
<button id="checkValues">Check</button>
<div id="output" />
document.getElementById("checkValues").onclick = function(){
var value1 = parseFloat(document.getElementById("value1").value);
var value2 = parseFloat(document.getElementById("value2").value);
var value3 = parseFloat(document.getElementById("value3").value);
var maxValue = parseFloat(Math.max(Math.max(value1, value2), value3));
if(1-(value1 / maxValue) <= .03 && 1-(value2 / maxValue) <= .03 && 1-(value3 / maxValue) <= .03){
alert('all numbers are within 3% of each other')
}
else{
alert('numbers NOT within 3%');
}
}
它接受3个输入，找到最大值，并确保所有3个数字都在最大的3%以内
只需对值进行排序并计算相对变化：
function calculatePercent(a, b, c) {
var values = [a, b, c];
values.sort(function (a, b) { return a - b; });
return (values[2] - values[0]) / values[0];
}
document.write(calculatePercent(100, 101, 102) + '<br>');
document.write(calculatePercent(80, 90, 100) + '<br>');