js虚拟计算器

今天分享一个计算器的代码实现效果
可以实现加,减,乘,除的简单运算
也是用js写的,喜欢的可以拿去玩玩,
有什么写得不好的,下面评论,我也好修改

这是HTML的效果图:

在这里插入图片描述
下面是一些代码的展示

这是HTML的代码

    <h1>简易计算器</h1>
<div id="display" style="height: 80px;width: 400px;background-color: aquamarine;font-size: 30pt"></div>
    <br/>
<input type="button"  value="1" onclick="numberClick(1)" style="width: 90px;height: 50px"/>
<input type="button"  value="2" onclick="numberClick(2)" style="width: 90px;height: 50px"/>
<input type="button"  value="3" onclick="numberClick(3)" style="width: 90px;height: 50px"/>
 <input type="button"  value="+" onclick="setOperate('+')" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button"  value="4" onclick="numberClick(4)" style="width: 90px;height: 50px"/>
<input type="button"  value="5" onclick="numberClick(5)" style="width: 90px;height: 50px"/>
<input type="button"  value="6" onclick="numberClick(6)" style="width: 90px;height: 50px"/>
<input type="button"  value="-" onclick="setOperate('-')" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button"  value="7" onclick="numberClick(7)" style="width: 90px;height: 50px"/>
<input type="button"  value="8" onclick="numberClick(8)" style="width: 90px;height: 50px"/>
<input type="button"  value="9" onclick="numberClick(9)" style="width: 90px;height: 50px"/>
<input type="button"  value="*" onclick="setOperate('*')" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button"  value="0" onclick="numberClick(0)" style="width: 90px;height: 50px"/>
<input type="button"  value="/" onclick="setOperate('/')" style="width: 90px;height: 50px"/>
<input type="button"  value="%" onclick="setOperate('%')" style="width: 90px;height: 50px"/>
<input type="button"  value="=" onclick="getResult()" style="width: 90px;height: 50px"/>
<br/><br/><br/>
<input type="button"  value="清空" onclick="kong()" style="width: 90px;height: 50px"/>
<input type="button"  value="回退" onclick="tui" style="width: 90px;height: 50px"/>

下面这是js的代码展示,两段代码直接复制下来就可以用
主要难点:数字的点击事件/显示按钮点击的内容/记录操作符/获取结果


<script type="text/javascript">

    var number1 = "";
    var number2 = "";
    var opt = "";


    //数字的点击事件
    function numberClick(a){
        if (opt == ""){
            document.getElementById("display").innerText = "";
            number1+=a;
        } else {
            number2+=a;
        }
        showStr();
    }

    //显示按钮的点击内容
    function showStr() {
        document.getElementById("display").innerText = "";
        document.getElementById("display").innerText = number1+opt+number2;
    }

    //记录操作符
    function setOperate(o){
        opt = o;
        showStr();
    }

    //获取结果
    function getResult(){
        var result = 0;
        switch (opt){
            case "+":
                result = parseInt(number1)+parseInt(number2);
                break;
            case "-":
                result = parseInt(number1)-parseInt(number2);
                break;
            case "*":
                result = parseInt(number1)*parseInt(number2);
                break;
            case "/":
                result = parseInt(number1)/parseInt(number2);
                break;
            case "%":
                result = parseInt(number1)%parseInt(number2);
                break;
            default :
                alert("非法操作!!!");
        }
        dispialStr("="+result);
        opt = "";
    }
    var  s="";
    //结果显示
    function dispialStr(str){
       s = document.getElementById("display").innerText;
        document.getElementById("display").innerText = (s+str);
    }
    //清空div
    function kong(){
        var number1 = "";
        var number2 = "";
        var opt = "";
       s="";
        document.getElementById("display").innerText=s;
    }
</script>

发布了27 篇原创文章 · 获赞 45 · 访问量 2680

猜你喜欢

转载自blog.csdn.net/weixin_45746635/article/details/102562739
今日推荐