js完成一个简易计算器

来源：互联网发布：java解析syslog 编辑：程序博客网时间：2024/05/22 20:44

第一次写这样的东西，找不到思路。用原生js码了一堆字，输入结果，不对再改。反反复复，还是不对。

之后用了eval，写出的代码是少了很多，但思路还是没变。（一般最大的问题就在这）

最后是分存储器和计算器显示屏两部分来完成（之前敲代码的时候写来写去就是这两块，同时写这两部分，我思维特别混乱）

先写的是存储器部分（存储器的运算结果需要显示在显示码上），写完存储器部分之后，举了一个含有多运算符多位数的运算例子，找规律来写存储器和显示器的结合部分。

好在写例子的时候没有走什么弯路：

写一个15*10的表达式，这样拆分：
一：先列出前三列，包含着你给计算器写入的数以及你希望计算机显示的数，还有string值（写存储器部分是string起很大作用）。
二：后几列是你为了达到前三列的效果想方设法写出的参数。
三：最后根据参数找规律，将找到的规律填到列出的表格上，看能否实现表格中的逻辑
四：不要忘记按下等于键之后，将flag、variant设为最初的值。
入显 string 传进的flag variant 显示后flag 后variant 1 1 1 false 0 string false 0 5 15 15 false 0 string false 0 * 15 15* false 0 eval true 1 1 1 15*1 true 1 num true 2 0 10 15*10 true 2 value+num true 3

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>calculator</title>    <meta name="viewport" content="width=device-width,initial-scale=1"    />    <style>        .container {            display: flex;            align-items: center;            -webkit-align-items: center;            justify-content: center;            -webkit-justify-content: center;            height: 50rem;        }        .calculator {            display: flex;            flex-direction: column;            width: 20rem;            background: #000;        }        .result {            font-size: 4.5rem;            padding-top: 4.5rem;            text-align: right;            color: #FFF;        }        .keys {            display: flex;            flex-wrap: wrap;            background: #BBBBBB;            font-size: 1.5rem;        }        .key {            width: 25%;            box-sizing: border-box;            text-align: center;            color: #FFF;            padding: 1.5rem;            border: 1px solid #000;        }        .key-zero {            display: flex;            flex-grow: 2;            text-align: left;        }        .key:nth-child(4n) {            background: #F98810;        }         .key:last-child {            background: #F98810;        }        .key:active {            box-shadow: 2px 2px 10px #666 inset;        }         .key:hover {            background: #C6C7C9;        }        .key:nth-child(4n):hover {                background: #D96D00;        }    </style></head><body>    <div class="container">        <div class="calculator">            <div class="result" id="screen">0</div>            <div class="keys" id="menu">                <div class="key" id="reset">AC</div>                <div class="key" id="inverse">+/-</div>                <div class="key ">%</div>                <div class="key operator">÷</div>                <div class="key number">7</div>                <div class="key number">8</div>                <div class="key number">9</div>                <div class="key operator">×</div>                <div class="key number">4</div>                <div class="key number">5</div>                <div class="key number">6</div>                <div class="key operator">-</div>                <div class="key number">1</div>                <div class="key number">2</div>                <div class="key number">3</div>                <div class="key operator">+</div>                <div class="key key-zero number">0</div>                <div class="key ">.</div>                <div class="key">=</div>            </div>        </div>    </div>    <script>        window.onload = function() {            var screen = document.getElementById('screen');            var reset = document.getElementById('reset');            var inverse = document.getElementById('inverse');            var menu = document.getElementById('menu');            var string = '';             var variant = 0;            var keys = menu.getElementsByTagName('div');            for (var i=0 ; i<keys.length ; i++) {                var flag = false;                keys[i].onclick = function() {                    var num = this.firstChild.nodeValue;                    var value = screen.firstChild.nodeValue;                    /*存储器部分                    if (num == '=') {                        console.log(string);                        var result = eval(string);                        string = result;                        screen.firstChild.nodeValue = result;                    } else if(num == '%') {                        var result = eval(string);                        screen.firstChild.nodeValue = result/100;                    } else if (this.className.match(new RegExp("(\\s||^)" + "operator" + "(\\s||$)")) || this.className.match(new RegExp("(\\s||^)" + "number" + "(\\s||$)"))){                        if (num == '×') num='*';                        if (num == '÷') num='/';                        string = string + num;                        console.log(string);                    }*/                    //存储器和显示码结合                    if (num == '=') {                        console.log(string);                        var result = eval(string);                        string = result;                        screen.firstChild.nodeValue = result;                        variant = 0;                    } else if(num == '%') {                        var result = eval(string);                        screen.firstChild.nodeValue = result/100;                    } else if (this.className.match(new RegExp("(\\s||^)" + "number" + "(\\s||$)"))){                        string = string + num;                        if (flag == false) {                            screen.firstChild.nodeValue = eval(string);                        }   else {                            if (variant == 1) {                                screen.firstChild.nodeValue = num;                            } if (variant >= 2) {                                screen.firstChild.nodeValue = value + num;                            }                            variant++;                        }                       } else if (this.className.match(new RegExp("(\\s||^)" + "operator" + "(\\s||$)"))) {                        string = eval(string);                        screen.firstChild.nodeValue = string;                        flag = true;                        variant = 1;                        if (num == '×') num='*';                        if (num == '÷') num='/';                        string = string + num;                    }                   }            }            /*清零功能*/            reset.onclick = function(){                var value = screen.firstChild.nodeValue;                if (value != 0) {                    screen.firstChild.nodeValue = 0;                    reset.firstChild.nodeValue = "AC";                }                 string = '';                variant = 0;                flag = false;            }            /*正负数转换功能*/            inverse.onclick = function(){                var value = screen.firstChild.nodeValue;                if (value > 0) {                    value = value-2*value;                } else if (value < 0) {                    value = Math.abs(value);                } else {                    if (value=='0') {                        value='-'+0;                    } else {                        value = 0;                    }                }                screen.firstChild.nodeValue = value;            }           }    </script></body></html>

总结：
1.列出你想要实现的效果，逻辑复杂就分块完成。逻辑清晰一些就可以动手完成，若写了一部分逻辑还是很混乱，回过来重新总结逻辑部分，
这样完成的更快。
2.没有思路的时候参考他人想法，快速获得反馈。或者缓两天再写。
3.完善代码，可以合并的地方就合并到一块。

0 0