用js制作一个简单计算器

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

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

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

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

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

html代码如下:

=

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;

        }

}

}

你可能感兴趣的:(用js制作一个简单计算器)