简易的加减乘除的计算器代码js

JavaScript017

简易的加减乘除的计算器代码js,第1张

//html

<input type="text" id="num1" value="" />

    <select id="mySelect">

        <option value="+">+</option>

        <option value="-">-</option>

        <option value="*">*</option>

        <option value="/">/</option>

    </select>

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

    <input type="button" id="jisuan" value="计算" />

//js

<script>

    var oTxt1 = document.getElementById('num1')

    var oTxt2 = document.getElementById('num2')

    var oSelect = document.getElementById('mySelect')

    var oBtn = document.getElementById('jisuan')

    oBtn.onclick=function(){

        switch(oSelect.value){

            case '+':

                alert(parseInt(oTxt1.value)+parseInt(oTxt2.value))

                break

            case '-':

                alert(parseInt(oTxt1.value)-parseInt(oTxt2.value))

                break

            case '*':

                alert(parseInt(oTxt1.value)*parseInt(oTxt2.value))

                break

            case '/':

                if(parseInt(oTxt2.value) !== 0){

                    alert(parseInt(oTxt1.value)/parseInt(oTxt2.value))

                }else{

                    alert('除数不能为0')

                }

                

                break

            default:

                alert('Bug!!!')

        }

    }

</script>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title></title>

</head>

<body>

<table>

<tr>

<td><input type="button" value="add" onclick="setOp('+', 'add')"/></td>

<td><input type="button" value="miner" onclick="setOp('-', 'miner')"/></td>

<td><input type="button" value="times" onclick="setOp('*', 'times')"/></td>

<td><input type="button" value="divide" onclick="setOp('/', 'divide')"/></td>

</tr>

</table>

<table id="tb_calc" style="display:none">

<tr>

<td><input id="x" type="text" style="width:100px" value="" name="x" /></td>

<td><lable id="op" name="op"></lable></td>

<td><input id="y" type="text" style="width:100px" value="" name="y" /></td>

<td><input id="opTips" type="button" value="" onclick="calc()"/></td>

<td><lable id="z" name="z"></lable></td>

</tr>

</table>

<script type="application/javascript">

function setOp(op, opTips)

{

var tb=document.getElementById("tb_calc")

tb.style.display = "none"

document.getElementById("x").value = ""

document.getElementById("y").value = ""

document.getElementById("z").innerText = ""

document.getElementById("op").innerText = op

document.getElementById("opTips").value = opTips

tb.style.display = "block"

}

function calc()

{

var x = parseInt(document.getElementById("x").value)

var y = parseInt(document.getElementById("y").value)

var op = document.getElementById("op").innerText

var z = ""

switch(op)

{

case '+':

z = x + y

break

case '-':

z = x - y

break

case '*':

z = x * y

break

case '/':

z = x / y

break

default:

z = ''

}

console.log(x, op, y, '=', z)

document.getElementById("z").innerText = z

}

</script>

</body>

</html>

function test(){

     var txt1 = document.getElementById("txt1"),

         txt2 = document.getElementById("txt2"),

         txt3 = document.getElementById("txt3"),

         opt  = document.getElementById("sel")

     txt3.value =  eval(txt1.value + opt.value + txt2.value)//eval函数可计算某个字符串,并执行其中的的js代码

} <input type="text" id="txt1" />

<select id="sel">

     <option value="+">+</option>

     <option value="-">-</option>

     <option value="*">*</option>

     <option value="/">/</option>

</select>

<input type="text" id="txt2" />

=

<input type="text" id="txt3" />

<input type="button" id="btn" value="计算" onclick="test()"/>