html计算加减乘除

html计算加减乘除,第1张

<!DOCTYPE html>  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html charset=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>

实现的步骤,第一步是加4个按钮,如图所示:

第二步需要加两个输入框,两个,一个按钮

首先 给每个文本框一个ID

暂且以 one two result来表示

给 *** 作符一个ID :op

var one=document.getElementById("one").value

var two=document.getElementById("two").value

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

switch(op){

case "+":

result.value=parseInt(one)+parseInt(two)

break

case "-":

result.value=parseInt(one)-parseInt(two)

break

result.value=parseInt(one)*parseInt(two)

case "*":

break

result.value=parseInt(one)/parseInt(two)

case "/":

break

}

细节方面就看你自己了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8377808.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存