如何为计算器添加中值函数?

时间:2016-04-28 02:23:32

标签: javascript

晚上好!我已经创建了一个均值计算器,我还想为它添加中值函数。我试图创建它,但它不是很成功。请帮忙!以下是我对平均值的代码:

"<fieldset id="numbers"><legend>Numbers</legend>
    First number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Second number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Third number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Fourth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Fifth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" />
</fieldset>
<div id="average">Average: --</div>
<script type="text/javascript">
    function getTotal() {
        var inputs = document.getElementById('numbers').getElementsByTagName('input'),
            count = inputs.length, i, total = 0;
        for( i=0; i<count; i++) total += parseInt(inputs[i].value || "0",10);
        document.getElementById('average').firstChild.nodeValue = "Average: "+(total/count);
    }"

这是我的所有代码。

<select id="operator">
  <option value="-">Subtract</option>
  <option value="+">Add</option>
  <option value="*">Multiply</option>
  <option value="/">Divide</option>
</select>

<h3>Calculator</h3>
1st Number:&nbsp;&nbsp;<input id="x" data-in="" type="text" /><br>2nd Number:
<input id="y" data-in="" type="text" br>
<hr>Answer:
<div id="d"></div>

<SCRIPT language="JavaScript">
var x = document.getElementById("x");
var y = document.getElementById("y");
var d = document.getElementById("d");
var xstored = x.getAttribute("data-in");
var ystored = y.getAttribute("data-in");
setInterval(function(){
    if( x == document.activeElement ){
     var temp = x.value;
     if( xstored != temp ){
       xstored = temp;
       x.setAttribute("data-in",temp);
       calculate();
     }
    }
    if( y == document.activeElement ){
     var temp = y.value;
     if( ystored != temp ){
       ystored = temp;
       y.setAttribute("data-in",temp);
       calculate();
     }
    }
},50);

function calculate() {
  var operator = document.getElementById('operator').value;
  var value = eval(x.value + operator + y.value);
  d.innerHTML = value;
}
x.onblur = calculate;
calculate();
</SCRIPT>



<hr>


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    &nbsp;&nbsp;
    <h3>Backround Color</h3>
<select runat="server" id="select">
    <option value="A" style="background-color: white;">White</option>
    <option value="B" style="background-color: black;">Black</option>
    <option value="C" style="background-color: yellow;">Yellow</option>
    <option value="D" style="background-color: green;">Green</option>
    <option value="E" style="background-color: blue;">Blue</option>
    <option value="F" style="background-color: red;">Red</option>
    <option value="G" style="background-color: purple;">Purple</option> 
    <option value="H" style="background-color: orange;">Orange</option>
    <option value="I" style="background-color: brown;">Brown</option>
    <option value="J" style="background-color: pink;">Pink</option>
    <option value="K" style="background-color: cyan;">Cyan</option>          
    <option value="L" style="background-color: gray;">Gray</option>
</select>
<script>
$('#select').change(function(){
      if($(this).val() == 'A'){
        $("body").css('background-color', 'white');
      }
        if($(this).val() == 'B'){
        $("body").css('background-color', 'black');
      }
        if($(this).val() == 'C'){
        $("body").css('background-color', 'yellow');
      }
        if($(this).val() == 'D'){
        $("body").css('background-color', 'green');
      }
        if($(this).val() == 'E'){
        $("body").css('background-color', 'blue');
      }
      if($(this).val() == 'F'){
        $("body").css('background-color', 'red');
      }
      if($(this).val() == 'G'){
        $("body").css('background-color', 'purple');
      }
      if($(this).val() == 'H'){
        $("body").css('background-color', 'orange');
      }
      if($(this).val() == 'I'){
        $("body").css('background-color', 'brown');
      }
      if($(this).val() == 'J'){
        $("body").css('background-color', 'pink');
      }
      if($(this).val() == 'K'){
        $("body").css('background-color', 'cyan');
      }
      if($(this).val() == 'L'){
        $("body").css('background-color', 'gray');
      }
    });
</script>
</body>
</html>



<hr>

<fieldset id="numbers"><legend>Numbers</legend>
    First number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Second number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Third number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Fourth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br/>
    Fifth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" />
</fieldset>
<div id="average">Average: --</div>
<script type="text/javascript">
    function getTotal() {
        var inputs = document.getElementById('numbers').getElementsByTagName('input'),
            count = inputs.length, i, total = 0;
        for( i=0; i<count; i++) total += parseInt(inputs[i].value || "0",10);
        document.getElementById('average').firstChild.nodeValue = "Average: "+(total/count);
    }


</script>

1 个答案:

答案 0 :(得分:0)

Working JsBin

查找数组中位数的函数:

function median(arr) {
    arr.sort( function(a,b) {return a - b;} );
    var mid = Math.floor(arr.length/2);
    if(arr.length % 2) {
      return arr[mid];
    }
    else {
      return (arr[mid-1] + arr[mid]) / 2;
    }
}