javascript 前端开发:图形四则运算计算器

java和前端开发|前端开发移动端跟pc端的区别|网站前端开发

思路
收集鼠标点击的数字和运算符存入数组。类似这样

[“1″,”+”,”2″,”*”,”3″]
点击“=”号后js对数组进行分析计算。

接着问题来了。数组中的运算符号是以字符串形式保存,并不能直接使用。也无法转义。。卡了很久,最后想到了正则表达式配合N个if来判断。

实现四则运算的主要思路
将数组一轮轮递归,直到数组剩下最后1个结果。
+ – * \ ##→ + – ##→ + – ##→ ##→ 结果

重要步骤
main()接收数组,使用indexOf数组遍历数组中的乘号,除号,取余号(取余% 与乘除同级)
[quote] signObj.mul = arr.indexOf(“×”);//查找并记录运算符号在数组中首次出现的位置(-1)则没有
signObj.div = arr.indexOf(“/”);
signObj.sur = arr.indexOf(“%”); [/quote]
使用Math.min(x1,x2,x3)方法即可得到最小的索引值,当然如果indexOf没有在数组找到目标,会返回-1,-1是会影响取最小值的,这时需要二外对-1进行判断。把-1变成更高的值。
[quote] function getMin(p1,p2,p3){
//三目运算 为了不影响取最小值,将为-1的值变成999.
p1 = p1 == (-1) ? 999 : p1;
p2 = p2 == (-1) ? 999 : p2;
p3 = p3 == (-1) ? 999 : p3;
return Math.min(p1,p2,p3);//取得并返回最小值
}[/quote]
接下来就是最终要的步骤了,
获得要计算的索引值后,使用强大的Array方法splice()

arrs.splice(cutValue-1,3,_result);
splice的参数是(删除数组的起始索引值,删除数量,要替换进的新值)
下面模拟一下这个步骤。
【1+10÷23 】 ##→ 【1+53】 ##→ 【1+15】 ##→ 【16】
如果数组长度为1,则为最终结果

ps:因为使用JavaScript 从数组读取数字和运算符来绘制的图形的原因。手机和IE浏览器中计算器界面效果会出现前后颠倒的情况。
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>阿里巴巴前端团队目前主要采用哪些javascript框架做应用开发:计算器</title>
    <style>
        body {
            background-color: #EEE5DE;
        }
        #box {
            width: 420px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -300px;
            margin-left: -210px;
            border: 1px solid;
            border-radius: 5px;
            overflow: hidden;
        }
        .show {
            width: 420px;
            height: 140px;
            background-color: rgb(154, 152, 153);
        }
        /*显示板*/
        .input {
            width: 100%;
            height: 70px;
            border-bottom: 1px solid;
            text-align: right;
            font-size: 50px;
            line-height: 70px;
            padding-right: 10px;
        }
        .result {
            margin-right: 100px;
            text-align: right;
            width: 100%;
            height: 68px;
            font-size: 30px;
            line-height: 68px;
            /*border:1px solid red;*/
        }
        .symbols-box {
            width: 100%;
            height: calc(100% – 140px);
            text-align: center;
            font-size: 36px;
            font-family: “幼圆”;
            background-color: rgb(216, 213, 214);
        }
        .symbols-box td {
            display: block;
            float: left;
            width: 101px;
            border-right: 1px solid rgb(142, 140, 141);
            cursor: pointer;
        }
        .symbols-box tr {
            margin-top: -3px;
            line-height: 90px;
            display: block;
            height: 94px;
            width: 100%;
            border-bottom: 1px solid rgb(142, 140, 141);
        }
    </style>
</head>
<body>
    <div id=”box”>
        <div class=”show”>
            <div class=”input”></div>
            <div class=”result”>显示结果</div>
        </div>
        <table class=”symbols-box”>
        </table>
    </div>
    <script>
        // 超类
        function supper() {}
        supper.prototype = {
            numArray: [],
        }
        var clearScreen = 0;
        // 渲染符号
        function drawingSymbols() {
            var symbolsArray = [“AC”, “C”, “%”, “÷”, “7”, “8”, “9”, “×”, “4”, “5”, “6”, “-“, “1”, “2”, “3”, “+”, “0”, “.”, “=”];
            var symbolsBox = document.querySelector(“.symbols-box”);
            rows = symbolsBox.insertRow(0);
            var newCell = 0;
            var cell = null;
            var symbolsBGCReg = /[=×+÷-]+/;
            symbolsArray.forEach(function (e) { //遍历数组,准备渲染符号
                newCell++;
                if (newCell == 5) { //换行
                    rows = symbolsBox.insertRow();
                    newCell = 0;
                }
                cell = rows.insertCell(); //添加列并写入符号信息
                cell.innerHTML = e;
                if (symbolsBGCReg.test(cell.innerHTML)) {
                    console.log(this.innerHTML)
                    cell.style.backgroundColor = “rgb(246,146,64)”;
                }
                if (e == “0”) { //为0键设置2倍宽度
                    cell.style.width = “205px”;
                }
            })
        }
        //根据操作记录并收集数值和运算符号数据,存入数组
        function prepareData() {
            var inherit = new supper();
            var symbolsBox = document.querySelector(“.symbols-box”);
            // var show = document.querySelector(“.show”);
            var resultBox = document.querySelector(“.result”);
            var input = document.querySelector(“.input”); //输入显示器
            var td = symbolsBox.querySelectorAll(“td”);
            var jointNum = “”;
            var reg = /[×÷+%-]+/;
            for (var i = 0; i < td.length; i++) {
                td[i].onclick = function () {
                    //再次计算,输入屏清空
                    if (clearScreen == 0) {
                        input.innerHTML = “”;
                        clearScreen = 1;
                    }
                    //清空按钮
                    if (this.innerHTML == “C”) {
                        jointNum = “”;
                        inherit.numArray.length = 0;
                        input.innerHTML = “”;
                        return;
                    }
                    //点击“=”号时调用main()进行计算
                    if (this.innerHTML == “=”) {
                        inherit.numArray.push(jointNum);
                        console.log(inherit.numArray)
                        resultBox.innerHTML = main(inherit.numArray);
                        jointNum = “”;
                        result = inherit.numArray.length = 0;
                        return;
                    };
                    //连续输入数字,数字传入jointNum中
                    if (!reg.test(this.innerHTML)) {
                        jointNum += this.innerHTML;
                    }
                    //点击运算符号时,将先前存储的jointNum种的数字推入数组numArray中
                    if (reg.test(this.innerHTML)) {
                        console.log(this.innerHTML)
                        inherit.numArray.push(jointNum);
                        inherit.numArray.push(this.innerHTML) //运算符号也推入数组
                        jointNum = “”;
                    }
                    //退格键
                    if (this.innerHTML == “AC”) {
                        jointNum = “”;
                        input.innerHTML = inherit.numArray.join(“”);
                        return;
                    }
                    if (this.innerHTML == “+/-”) {}
                    input.innerHTML += this.innerHTML + “”;
                    console.log(inherit.numArray)
                }
            }
            // console.log(td.length)
        }
        // 计算
        function main(arrs) {
            clearScreen = 0;
            var cutValue = getCutIndex(arrs); //调用getCutIndex()获取要计算位置的索引
            var _result = calc(arrs[cutValue], arrs[cutValue – 1], arrs[cutValue + 1]); //调用calc()进行计算
            arrs.splice(cutValue – 1, 3, _result);
            if (arrs.length !== 1) {
                arguments.callee(arrs);
            }
            if (arrs.length == 1) {
                return arrs[0];
            }
        }
        function calc(m, num1, num2) { //符号,前一个值,后一个值
            num1 = parseFloat(num1);
            num2 = parseFloat(num2); //解析字符串获取数字
            if (m == “+”) {
                return num1 + num2;
            }
            if (m == “×”) {
                return num1 * num2;
            }
            if (m == “÷”) {
                return num1 / num2;
            }
            if (m == “-“) {
                return num1 – num2;
            }
        }
        //获取要计算的索引值
        function getCutIndex(arr) {
            var signObj = {
                “x”: 0, //乘
                “÷”: 0, //除
                “sum”: 0, //加
                “sub”: 0, //减
                “sur”: 0 //取余
            };
            signObj.mul = arr.indexOf(“×”); //查找并记录运算符号在数组中首次出现的位置(-1)则没有
            console.log(signObj.mul)
            signObj.div = arr.indexOf(“÷”);
            signObj.sum = arr.indexOf(“+”);
            signObj.sub = arr.indexOf(“-“);
            signObj.sur = arr.indexOf(“%”);
            if (signObj.mul != “-1” || signObj.div != “-1” || signObj.sur != “-1”) { //判断有没有乘除取余(-1表示没有)
                return getMin(signObj.mul, signObj.div, signObj.sur);
            }
            if (signObj.mul == “-1” || signObj.div == “-1”) { //如果只剩下加减,则按顺序计算,返回数组索引值1
                return 1;
            } //没有乘除
        }
        function getMin(p1, p2, p3) {
            //三目运算 为了不影响取最小值,将为-1的值变成999.
            p1 = p1 == (-1) ? 999 : p1;
            p2 = p2 == (-1) ? 999 : p2;
            p3 = p3 == (-1) ? 999 : p3;
            return Math.min(p1, p2, p3); //取得并返回最小值
        }
        function onload() {
            drawingSymbols();
            prepareData();
        }
        onload()
    </script>
</body>
</html>
ace 前端开发ui框架|前端开发项目框架搭建|移动互联应用前端开发的基本过程
» 本文来自:前端开发者 » 《javascript 前端开发:图形四则运算计算器》
» 本文链接地址:https://www.rokub.com/3910.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!