-2

这是我到目前为止所拥有的。输入计算后，我很难让计算器清除。一旦我得到答案，它就会在您输入数字的框中显示 NAN。建议会很棒！谢谢

<HTML>
<HEAD>
    <script type = "text/javascript">
        function divide()
        {
            document.calculator.output.value += "/";
        }
        function add()
        {
            document.calculator.output.value += "+";
        }
        function num9()
        {
            document.calculator.output.value += "9";
        }
        function num8()
        {
            document.calculator.output.value += "8";
        }
        function num7()
        {
            document.calculator.output.value += "7";

        }
        function multiply()
        {
            document.calculator.output.value += "*";
        }
        function percent()
        {
            document.calculator.output.value += "%";
        }
        function num6()
        {
            document.calculator.output.value += "6";
        }
        function num5()
        {
            document.calculator.output.value += "5";
        }

        function num4()
        {
            document.calculator.output.value += "4";
        }


        function subtr()
        {
            document.calculator.output.value += "-";
        }

        function num3()
        {
            document.calculator.output.value += "3";
        }

        function num2()
        {
            document.calculator.output.value += "2";
        }

        function num1()
        {
            document.calculator.output.value += "1";
        }

        function numZero()
        {
            document.calculator.output.value += "0";
        }

function buildFormula()
{
var evalu= alert(eval(document.calculator.output.value)) + document.clear();
document.calculator.output.value= evalu;
}


</script>
</HEAD>
<BODY>
<form name="calculator">

<table border=0>
<tr>
    <td colspan=4><input type=text readonly=true name="output" size = 25></td>
</tr>
<tr>
    <td><input type=button value= "   7   "  onClick="num7()"></td>
    <td><input type=button value= "   8   " onClick="num8()"></td>
    <td><input type=button value= "   9   " onClick="num9()"></td>
    <td><input type=button value= "    /  " onClick="divide()"></td>
    <td><input type=button value= "     + " onClick="add()"></td>
</tr>
<tr>
    <td><input type=button value= "   4   " onClick="num4()"></td>
    <td><input type=button value= "   5 " onClick="num5()"></td>
    <td><input type=button value= "   6  " onClick= "num6()"></td>
    <td><input type=button value= "    *   " onClick= "multiply()"></td>
    <td><input type=button value= "    %    " onClick="percent()"></td>
</tr>
    <tr>
        <td><input type=button value = "   1   " onClick="num1()"></td>
        <td><input type=button value = "   2   " onClick="num2()"></td>
        <td><input type=button value = "   3   " onClick="num3()"></td>
        <td><input type=button value = "    -    " onClick="subtr()"></td>
        <td><input type=button value = "     =     " onClick="buildFormula()"></td>
</tr>
<tr>
    <td colspan=5><input type=button value = "             0             "     onClick="numZero()"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
4

1 回答 1

0

如果你使用 HTML，你应该指定一个 doctype 并确保 html 是有效的。

最好不要将您的 html 与 javascript 混合，因此addEventListener在 JavaScript 中添加事件处理程序

最好将事件侦听器添加到包含按钮的容器中，而不是将其添加到每个按钮中。

最好在有意义的地方添加脚本。将脚本放在头脑中并尝试将事件处理程序添加到尚不存在的元素并没有多大意义。添加额外的脚本来弥补这一点（body.onload）仍然不如在内容末尾添加脚本好。

您仍然需要编写 switch 语句（如果是家庭作业）来计算结果，但数字存储在 calc.numbers 中，运算符存储在 calc.operators 中：

<!DOCTYPE html>
<HTML>
<HEAD>
 <title>My calc</title>
</HEAD>
<BODY>
<form name="calculator">
<table  id="buttons">
<tr>
    <td colspan=4><div id="output"></div></td>
</tr>
<tr>
    <td><input type=button value= "   7   "  ></td>
    <td><input type=button value= "   8   " ></td>
    <td><input type=button value= "   9   " ></td>
    <td><input type=button value= "    /    " ></td>
    <td><input type=button value= "     +     " ></td>
</tr>
<tr>
    <td><input type=button value= "   4   " ></td>
    <td><input type=button value= "   5   " ></td>
    <td><input type=button value= "   6   " ></td>
    <td><input type=button value= "    *    " ></td>
    <td><input type=button value= "    %    " ></td>
</tr>
    <tr>
        <td><input type=button value = "   1   " ></td>
        <td><input type=button value = "   2   " ></td>
        <td><input type=button value = "   3   " ></td>
        <td><input type=button value = "    -    " ></td>
        <td><input type=button value = "     =     " ></td>
</tr>
<tr>
    <td colspan=5><input type=button value = "             0             " ></td>
</tr>
</table>
</form>
<script>
var calc={
  curNum:[],
  numbers:[],
  operators:[],
  output:document.getElementById("output"),
  clickHandler:function(e){
    var ev=e||window.event;
    var nr=parseInt(ev.target.value);
    if(isNaN(nr)){
      calc.handleOperator(ev.target.value);
      return;
    }
    calc.curNum.push(nr);
    calc.output.innerHTML=calc.curNum.join("");
  },
  handleOperator:function(val){
    if(val==="     =     "){
      calc.calculateResult();
      return;
    }
    if(calc.curNum.length===0&&calc.numbers.length===0){
      return;
    }
    // when you press + and then % (replace + with %)
    if(calc.curNum.length===0&&calc.operators.length){
      calc.operators[calc.operators.length-1]=val;
    }else{
      calc.operators.push(val);
    }
    calc.numbers.push(parseInt(calc.curNum.join("")));
    // reset current number
    calc.curNum=[];
  },
  calculateResult:function(){
    //you could use switch here but it's complecated
    // to implement 3+2*6 so using eval instead
    // if for your homework you need to use switch then good luck
    // based on the above example you have to calculate 2*6 first
    // so you'll have to loop through the calc.operators a couple of times
    if(calc.curNum.length){
      calc.numbers.push(parseInt(calc.curNum.join("")));
    }
    var i=0,op,res=[];
    for(i=0;i<calc.numbers.length;i=i+1){
      op = ((i)===calc.operators.length)?"":calc.operators[i];
      res.push(calc.numbers[i]);
      res.push(op);
    }
    calc.numbers=[];
    calc.operators=[];
    console.log(res);
    calc.output.innerHTML=(eval(res.join("")));
    calc.curNum=[];
    calc.curNum.push(parseInt(calc.output.innerHTML));
  }
}
document.getElementById("buttons").addEventListener("click",calc.clickHandler);
</script>

</BODY>
</HTML>
于 2013-10-30T01:40:07.687 回答