基于JavaScript的简易计算器功能

 更新时间:2022年08月26日 09:39:03   作者:砖厂打工仔  
这篇文章主要为大家详细介绍了基于JavaScript的简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现简易计算器功能的具体代码,供大家参考,具体内容如下

效果图:

源代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .dome {
                width: 400px;
                height: 430px;
                margin: 50px auto;
                background: #CCC;
                padding: 20px;
            }

            .dome>input {
                width: 100%;
                height: 50px;
                font-size: 24px;
                margin-bottom: 30px;
            }

            .dome>button {
                width: 90px;
                height: 60px;
                background-color: white;
                border: none;
                margin: 5px;
                float: left;
                font-size: 18px;
            }

            button:hover {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="dome">
            <!-- disabled="disabled" 禁用输入框 -->
            <input type="" name="" id="ipt" value="0" />
            <button class="num">7</button>
            <button class="num">8</button>
            <button class="num">9</button>
            <button id="del">←</button>

            <button class="num">4</button>
            <button class="num">5</button>
            <button class="num">6</button>
            <button class="ysf">+</button>

            <button class="num">1</button>
            <button class="num">2</button>
            <button class="num">3</button>
            <button class="ysf">-</button>

            <button>%</button>
            <button class="num">0</button>
            <button class="num">.</button>
            <button class="ysf">*</button>

            <button id="clear">AC</button>
            <button class="ysf">/</button>
            <button id="result" style="width: 190px; background-color: #333; color: white;">=</button>
        </div>
    </body>
</html>


<script type="text/javascript">
    //1.把数字和小数点归为一类。class="num"
    //2.把加减乘除运算符归为一类。
    //3.显示框,退格键,归零键,等号 单独设置id。
    //4.把显示框,归零键,等号,退格 标签对象获取出来。
    //5.点击数字,在显示框上显示
    //6.要做运算,条件得两个数和一个运算符
    //7.定义三个变量用来接收第一个数,第二个数和运算符。
    //8.四则运算
    var numValue1 = '';
    var numValue2 = '';
    var czf = '';
    var ipt = document.getElementById("ipt");
    var del = document.getElementById("del");
    var clear = document.getElementById("clear");
    var result = document.getElementById("result");

    var numArr = document.getElementsByClassName("num");
    for (var i = 0; i < numArr.length; i++) {
        //给每个数字绑定单击事件
        numArr[i].onclick = function() {
            //判断用户是否在输入小数点
            if(this.innerText=="."){
                //alert("点小数点了");
                if(numValue1.indexOf(".")==-1&&numValue1.length>=1){
                    // var num = this.innerText;
                    // alert(num);
                    numValue1 += this.innerText;
                    //乘1会去掉首尾无效的0
                    ipt.value = numValue1*1;
                }
            }else{
                // var num = this.innerText;
                // alert(num);
                numValue1 += this.innerText*1;
                //乘1会去掉首尾无效的0
                ipt.value = numValue1;
            }
        }
    }

    //给运算符绑定单击事件
    var ysfArr = document.getElementsByClassName("ysf");
    for (var i = 0; i < ysfArr.length; i++) {
        //给每个数字绑定单击事件
        ysfArr[i].onclick = function() {
            //当用户点击了运算符,把第一个数字给第二个数字,然后把第一个数字清空,用来接收用户输入的第二个数字
            //alert(this.innerText);
            if (numValue2 == '') {
                numValue2 = numValue1;
                numValue1 = '';
                czf = this.innerText;
                //alert("普通运算");
            } else {
                //有可能会进行四则运算
                //alert("有可能会进行四则运算");
                if(numValue1!=''){
                    resultFun();
                }
            }
            //保存操作符
            czf = this.innerText;
        }
    }

    //给等号绑定单击事件,进行运算
    result.onclick = function() {
        resultFun();
    }

    //运算结果
    function resultFun() {
        var one = Number(numValue2);
        var two = Number(numValue1);
        var r = null;
        switch (czf) {
            case '+':
                r = one + two;
                break;
            case '-':
                r = one - two;
                break;
            case '*':
                r = one * two;
                break;
            case '/':
                if (two == 0) {
                    alert("除数不能为0");
                    numValue1 = '';
                    numValue2 = '';
                    czf = '';
                    r = 0;
                } else {
                    r = one / two;
                }
                break;
        }
        //四则运算时,把上一次运算的结果给numValue2,然后把numValue1 清空
        
        numValue2 = new Number(r).toFixed(4)*1;
        numValue1='';
        ipt.value = numValue2;
    }

    //归零键
    clear.onclick = function() {
        numValue1 = '';
        numValue2 = '';
        czf = '';
        ipt.value = '0';
    }

    //退格键
    del.onclick = function() {
        if (numValue1.length >= 1) {
            numValue1 = numValue1.substring(0, numValue1.length - 1);
            ipt.value = numValue1;
        }else if(numValue2.length >= 1){
            numValue2 = numValue2.substring(0, numValue2.length - 1);
            ipt.value = numValue2;
        }else {
            numValue1 = '';
            numValue2 = '';
            czf = '';
            ipt.value = '0';
        }
    }
</script>

补充说明:仍有部分bug尚未解决,因作者水平有限,代码仅供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论