用js制作一个简单计算器

今天我们做一个简单计算器，给两个文本框输入值，点击计算后，第三个文本框会出现相应的加减乘除运算的结果！

第一步：构建3个input文本框用于输入数组和显示结果，一个运算符的下拉列表框，一个计算按钮。

第二步：选择option的运算符会将对应的value赋值给select的value。

第三步：点击计算后，首先判断是否是数字，如果有任意一个不是数字则不运算。

第四步：如果都是数字则用switch语句根据select的value值来确定运算符进行运算，并将运算结果在输出结果的文本框里显示。

html代码如下：<input type="text" id="num1">

<select value="+" id="sel">

    <option value="+">+

    <option value="-">-

    <option value="*">*

    <option value="/">/

    <option value="%">%

<input type="text" id="num2">

<input type="button" value="计算" id="math">

=

<input type="text" id="result">

js代码如下：var oNum1=document.getElementById('num1');

var oNum2=document.getElementById('num2');

var oOp=document.getElementsByTagName('option');

var oSel=document.getElementById('sel');

var oMa=document.getElementById('math');

var oRe=document.getElementById('result');

for(var i=0;i

oOp[i].onclick=function () {

oSel.value=this.value;

    }

}

oMa.onclick=function () {

if(isNaN(oNum1.value)||isNaN(oNum2.value))

alert("请输入正确的数字");

    else {

switch (oSel.value)

{

case '+':

oRe.value=parseInt(oNum1.value)+parseInt(oNum2.value);

                break;

            case '-':

oRe.value=oNum1.value-oNum2.value;

                break;

            case '*':

oRe.value=oNum1.value*oNum2.value;

                break;

            case '/':

if(parseInt(oNum2.value)==0)alert("除数不能为0");

                else oRe.value=oNum1.value/oNum2.value;

                break;

            default:

oRe.value=oNum1.value%oNum2.value;

        }

}

}