一个简单计算器的javascript实现问题 求助！

初学javascript 编了一个简单的网页计算器 代码如下：
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>计算器</title>
        <script language="javascript">
           function add(x,y){
               var p=x+y;
               form.text3.value=p;
               show.text3.value;
           }
           function substract(x,y){
               var p=x-y;
               form.text3.value=p;
               show.text3.value;
           }
           function multiply(x,y){
               var p=x*y;
               form.text3.value=p;
               show.text3.value;           }
           function divide(x,y){
               var p=x/y;
               form.text3.value=p;
               show.text3.value;
           }
        </script>    </head>
    <body>
        <form name="form" method="post" action="">
             第一个数 <input type="text" name="first num" size="38" id="text1">
                    <br/><br/>
             第二个数 <input type="text" name="second num" size="38" id="text2">
                    <br/><br/>
                    <input type="button" name="add" value="+" onclick="add(form.text1.value,form.text2.value)">
                    <input type="button" name="subtract" value="-" onclick="substract(form.text1.value,form.text2.value)">
                    <input type="button" name="multiply" value="*" onclick="multiply(form.text1.value,form.text2.value)">
                    <input type="button" name="divide" value="/" onclick="divide(form.text1.value,form.text2.value)">
                    <br/><br/>
             计算结果  <input type="text" name="result" size="38" id="text3">
        </form>
    </body>
</html>
不知道为什么只能进行减法运算，其他运算偶读显示错误，找不到原因  希望高手指点。

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>计算器</title>    <script language="javascript" type="text/javascript">
            window.onload = function() {
                var cp = document.getElementsByName("compute");
                for (var i = 0; i < cp.length; i++) {
                    cp[i].onclick = function() {
                        var num1 = parseFloat(document.getElementById("text1").value);
                        var num2 = parseFloat(document.getElementById("text2").value);
                        if (this.value == "+") {
                            document.getElementById("result").value = num1 + num2;
                        }
                        if (this.value == "-") {
                            document.getElementById("result").value = num1 - num2;
                        }
                        if (this.value == "*") {
                            document.getElementById("result").value = num1 * num2;
                        }
                        if (this.value == "/") {
                            if (num2 == 0) { alert("除数不能为0！"); return; }
                            document.getElementById("result").value = num1 / num2;
                        }
                        switch (this.value) {
                            case "+":
                                document.getElementById("result").value = num1 + num2; break;
                            case "-":
                                document.getElementById("result").value = num1 - num2; break;
                            case "*":
                                document.getElementById("result").value = num1 * num2; break;
                            case "/":
                                if (num2 == 0) { alert("除数不能为0！"); return; }
                                document.getElementById("result").value = num1 / num2; break;
                            default:
                                break;
                        }
                    };
                }
            }
        </script></head>
    <body>
        <form name="form1" method="post" action="">
        第一个数
        <input type="text" size="20" id="text1" />
        <br />
        <br />
        第二个数
        <input type="text" size="20" id="text2" />
        <br />
        <br />
        <input type="button" name="compute" value="+" />
        <input type="button" name="compute" value="-" />
        <input type="button" name="compute" value="*" />
        <input type="button" name="compute" value="/" />
        <br />
        <br />
        计算结果
        <input type="text" id="result" size="20" />
        </form>
    </body>
    </html>
      

  2.   

    以前做的一个计算器，进行简单的加减乘除没问题
    <html>
    <head>
    <script type="text/javascript">
    var tool = tool || {};

    tool.createCalculator = function(el) {
    var loc = this.getLocation(el);
    var cal = new calculator(loc);
    cal.init();
    };

    tool.getLocation = function(el) {
    var left = el.offsetLeft;
    var top = el.offsetTop;
    while(el = el.offsetParent) {
    left += el.offsetLeft;
    top += el.offsetTop;
    }
    return {x: left, y: top};
    } tool.valueIsInArray = function(value, array) {
    var len = array.length;
    for (var i = 0; i < len; i = i + 1)
    {
    if (value == array[i])
    {
    return true;
    }
    }
    return false;
    } tool.NUM = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

    tool.OPERATE = ["+", "-", "*", "/", "%"]; var calculator = function(loc) {
    this.str = "";
    this.result = "";
    this.contentDiv = "";
    this.location = loc;
    this.lastBtn = "C";
    this.lastValue = "";
    this.lastOperation = "";
    this.text = null;
    }
    calculator.prototype = {
    init: function() {
    this.createContentDiv();
    this.createTopDiv();
    this.createText();
    this.createButton();
    },
    createContentDiv: function() {
    var div = document.createElement("div");
    div.style.cssText = "width: 200px; height: 190px; left:" + this.location.x + "; top: " + (this.location.y + 23) + "; position: absolute;border: 2px solid #000000;";
    this.contentDiv = div;
    document.body.appendChild(this.contentDiv);
    },
    createTopDiv: function(){
    var div = document.createElement("div");
    var titleDiv = document.createElement("div");
    var closeDiv = document.createElement("div");
    titleDiv.innerHTML = "计算器";
    closeDiv.innerHTML = "×";
    div.style.cssText = "float: left; width: 100%; height: 25px; background-color: #E1EDF7; margin-left: 1px; margin-right: 1px";
    titleDiv.style.cssText = "float:left; font-weight: bold; height: 100%; width: 80%;padding-left: 5px; padding-top:3px;"
    closeDiv.style.cssText = "float:right; height: 100%; width: 20px;padding-top: 3px; font-size: 14pt;"
    div.appendChild(titleDiv);
    div.appendChild(closeDiv);
    this.contentDiv.appendChild(div);
    var _this = this;
    closeDiv.onclick = function() {
    document.body.removeChild(_this.contentDiv);
    }
    },
    createText: function() {
    var div = document.createElement("div");
    div.style.cssText = "width: 100%; float: left; height: auto;margin-left: 1px;margin-right: 1px;";
    this.text = document.createElement("input");
    this.text.type = "text";
    this.text.readOnly = true;
    this.text.value = "0";
    this.text.style.cssText = "width: 100%;text-align: right;";
    div.appendChild(this.text);
    this.contentDiv.appendChild(div);
    },
    createButton: function() {
    var div = document.createElement("div");
    div.style.cssText = "width: 100%; float: left; height: auto;";
    var table = document.createElement("table");
    for (var i = 0; i < 4; i = i + 1) {
    var tr = table.insertRow();
    for (var j = 0; j < 5; j = j + 1) {
    var td = tr.insertCell();
    }
    }
    this.addBtnToTable(table);
    div.appendChild(table);
    this.contentDiv.appendChild(div);
    },
    addBtnToTable: function(table) {
    var btns = new Array();
    var vals = ["0","1","2","3","4","5","6","7","8","9","+/-",".","/","*","-","+","C","%","="];
    for (var i = 0; i < 19; i = i + 1) {
    btns[i] = document.createElement("button");
    btns[i].style.cssText = "width: 35px; height: 30px; font-size: 12pt;";
    btns[i].setAttribute("value", vals[i]);
    var _this = this;
    btns[i].onclick = function() {
    _this.clickBtn(_this, this.value);
    };
    }
    table.rows[0].cells[0].appendChild(btns[7]);
    table.rows[0].cells[1].appendChild(btns[8]);
    table.rows[0].cells[2].appendChild(btns[9]);
    table.rows[0].cells[3].appendChild(btns[12]);
    table.rows[0].cells[4].appendChild(btns[16]);
    table.rows[1].cells[0].appendChild(btns[4]);
    table.rows[1].cells[1].appendChild(btns[5]);
    table.rows[1].cells[2].appendChild(btns[6]);
    table.rows[1].cells[3].appendChild(btns[13]);
    table.rows[1].cells[4].appendChild(btns[17]);
    table.rows[2].cells[0].appendChild(btns[1]);
    table.rows[2].cells[1].appendChild(btns[2]);
    table.rows[2].cells[2].appendChild(btns[3]);
    table.rows[2].cells[3].appendChild(btns[14]);
    table.rows[2].cells[4].appendChild(btns[18]);
    table.rows[3].cells[0].appendChild(btns[0]);
    table.rows[3].cells[1].appendChild(btns[10]);
    table.rows[3].cells[2].appendChild(btns[11]);
    table.rows[3].cells[3].appendChild(btns[15]);
    table.rows[3].deleteCell(4);
    table.rows[2].cells[4].rowSpan = 2;
    btns[18].style.height = "65px";
    },
    clickBtn: function(cal, value) {
    switch(value) {
    case '+':
    cal.clickOperation(value);
    cal.lastOperation = value;
    break;
    case '-':
    cal.clickOperation(value);
    cal.lastOperation = value;
    break;
    case '*':
    cal.clickOperation(value);
    cal.lastOperation = value;
    break;
    case '/':
    cal.clickOperation(value);
    cal.lastOperation = value;
    break;
    case '%':
    cal.clickOperation(value);
    cal.lastOperation = value;
    break;
    case '.':
    cal.clickPoint(value);
    break;
    case '+/-':
    cal.clickAddOrLess(value);
    break;
    case 'C':
    this.str = "";
    this.lastValue = "";
    this.text.value = "0";
    break;
    case '=':
    cal.clickEquals(value);
    break;
    default:
    cal.clickNumber(value);
    break;
    }
    cal.lastBtn = value;
    },
      

  3.   

    clickNumber: function(value) {
    switch(this.lastBtn) {
    case '+': this.str += this.lastBtn;
    this.text.value = value;
    break;
    case '-':
    this.str += this.lastBtn;
    this.text.value = value;
    break;
    case '*':
    this.str += this.lastBtn;
    this.text.value = value;
    break;
    case '/':
    this.str += this.lastBtn;
    this.text.value = value;
    break;
    case '%':
    this.str += this.lastBtn;
    this.text.value = value;
    break;
    case 'C':
    this.text.value = value;
    break;
    case '=':
    this.text.value = value;
    this.str = "";
    break;
    default:
    this.text.value += value;
    this.text.value = eval(this.text.value);
    break;
    }
    },
    clickOperation: function(value) {
    switch(this.lastBtn) {
    case '+':
    this.text.value = value;
    break;
    case '-':
    this.text.value = value;
    break;
    case '*':
    this.text.value = value;
    break;
    case '/':
    this.text.value = value;
    break;
    case '%':
    this.text.value = value;
    break;
    case '.':
    this.str += this.text.value + "0";
    this.text.value = value;
    break;
    case '=':
    this.str = this.text.value;
    break;
    default:
    this.lastValue = this.text.value;
    this.str += this.text.value;
    this.text.value = value;
    break;
    }
    },
    clickPoint: function(value) {
    switch(this.lastBtn) {
    case '+':
    this.str += this.text.value;
    this.text.value = "0.";
    break;
    case '-':
    this.str += this.text.value;
    this.text.value = "0.";
    break;
    case '*':
    this.str += this.text.value;
    this.text.value = "0.";
    break;
    case '/':
    this.str += this.text.value;
    this.text.value = "0.";
    break;
    case '%':
    this.str += this.text.value;
    this.text.value = "0.";
    break;
    case '.':
    break;
    case '=':
    this.str = this.text.value + ".";
    break;
    default:
    this.text.value += ".";
    break;
    }
    },
    clickAddOrLess: function(value) {
    switch(this.lastBtn) {
    case '+':
    this.text.value = "0";
    break;
    case '-':
    this.text.value = "0";
    break;
    case '*':
    this.text.value = "0";
    break;
    case '/':
    this.text.value = "0";
    break;
    case '%':
    this.text.value = "0";
    break;
    case '.':
    this.text.value = eval("-" + this.text.value + "0");
    break;
    case '=':
    if (parseFloat(this.text.value) < 0) {
    this.str = eval("0-(" + this.text.value + ")");
    } else {
    this.str = eval("-" + this.text.value);
    }
    break;
    default:
    if (parseFloat(this.text.value) < 0) {
    this.text.value = eval("0-(" + this.text.value + ")");
    } else {
    this.text.value = eval("-" + this.text.value);
    }
    break;
    }
    },
    clickEquals: function(value) {
    switch(this.lastBtn) {
    case '+':
    this.str += (this.lastOperation + this.lastValue);
    this.text.value = eval(this.str);
    break;
    case '-':
    this.str += (this.lastOperation + this.lastValue);
    this.text.value = eval(this.str);
    break;
    case '*':
    this.str += (this.lastOperation + this.lastValue);
    this.text.value = eval(this.str);
    break;
    case '/':
    this.str += (this.lastOperation + this.lastValue);
    this.text.value = eval(this.str);
    break;
    case '%':
    this.str += (this.lastOperation + this.lastValue);
    this.text.value = eval(this.str);
    break;
    case '.':
    break;
    case '+/-':
    this.str += (this.lastOperation + this.lastValue);
    this.text.value = eval(this.str);
    break;
    case 'C':
    break;
    case '=':
    if (this.lastValue == "") {
    this.str += "0"
    } else {
    this.str += (this.lastOperation + this.lastValue);
    }
    this.text.value = eval(this.str);
    break;
    default:
    this.lastValue = this.text.value;
    this.str += this.lastValue;
    this.text.value = eval(this.str);
    this.str = this.text.value;
    break;
    }
    }
    }
    </script>
    </head>
    <body>
    <input type="text" onfocus="tool.createCalculator(this)" />
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <input type="text" onfocus="tool.createCalculator(this)" />
    </body>
    </html>