多功能计算器制作详解

雨点打透心脏的1/2处 2022-03-31 10:43 220阅读 0赞

> 在学习了js的基本语法后，我们就能利用所学来制作一个多功能计算器了，原理很简单，往下看，有惊喜哦！

### **基本原理：** ###

1.  **利用表格来完成计算机页面的分割**
2.  **利用元素的获取和对象的绑定来实现点击按键后的事件**
3.  **利用数组来记录存储键入的值和运算符**
4.  **利用eval函数计算字符串的值**
5.  **需要处理一些比较繁琐的bug //**重点解释

话不多说，直接上代码（为了好表述，将html，css，js 写在了一起）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>计算器</title>//简单的计算器，主要利用鼠标点击事件来实现，功能有加减乘除
        <style>
            table {
                    border-collapse: collapse;
                    width: 400px;
                    margin: 0 auto;
                    border: 1px solid silver;
                }
        
                table td {
                    border: 1px solid silver;
                }
        
                button[name="btnclick"] {
                    width: 100px;
                    height: 60px;
                    font-size: 25px;
                }
        
                button[name="btnall"] {
                    width: 100%;
                    height: 60px;
                    font-size: 25px;
                }
        
                .txt {
                    width: 99%;
                    height: 80px;
                    outline: none;
                    font-size: 30px;
                    text-align: right;
                    background-color: white;
                    border-style: none;
                }
        
            </style>
    </head>
    
    <body>
        
        <table>
            <tr>
                <td colspan="4"><input class="txt" type="text" disabled value="0" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button name="btnall" class="btn">ac</button>
                </td>
                <td colspan="2">
                    <button name="btnall" class="btn">del</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button name="btnclick" class="btn">7</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">8</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">9</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">*</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button name="btnclick" class="btn">4</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">5</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">6</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">/</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button name="btnclick" class="btn">1</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">2</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">3</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">-</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button name="btnclick" class="btn">0</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">.</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">+</button>
                </td>
                <td>
                    <button name="btnclick" class="btn">=</button>
                </td>
            </tr>
        </table>
        <script>
            var arr=[];//定义数组来存储用户输入的值和符号
            var btn = document.getElementsByClassName('btn');//找到每个键
            var txt = document.getElementsByClassName('txt')[0];//找到了最上面的输出栏
    // 以下关于其参数value值，将用屏幕显示值理解
            for (var i = 0; i < btn.length; i++) {//遍历所有的按钮
                btn[i].onclick = function () 
                {
                   if(!isNaN(this.innerHTML)||this.innerHTML=='.'){//isNaN  表示选择
    //条件为 is not number
                   //这里只有数字和小数点能够进入选择
    //（其实数字和小数点都可看作一类，它们是互相结合的）
                    if (txt.value == "0") {//如果显示屏的值为零
                        if (this.innerHTML == '.') {
                            txt.value = '0' + this.innerHTML;
    //其实就是实现了只输入小数点时，默认显示为‘0.’
                        }
                        else{
                            txt.value=this.innerHTML;//其它直接显示所按的值
                        }
    
                    } else {
                        if(this.innerHTML=='.'){
                            if(txt.value.indexOf('.')==-1){
                                txt.value+=this.innerHTML;
    //如果按键为小数点，且之前没有输入过小数点，直接在屏幕值后+
                            }
                        }
                        else{
                            txt.value += this.innerHTML;//其它直接+屏幕值
                    }
                }
                   }
    
                   else{
                       if(this.innerHTML=='+'||this.innerHTML=='-'||this.innerHTML=='*'||this.innerHTML=='/'){
                           //如果键入为 + - * /  的话，进入此次选择
                           if(arr.length!=0){
                            if(txt.value=='0'&&isNaN(arr[arr.length-1])){
    //重点，由于键入+-*/后，屏幕值变为0，见176行 所以必须加此判断
    // arr.length-1表示数组的最后一位  此句代码可以实现连续输入 + - * / 时，
    //只保存最后一次的符号值到数组中 预防bug
                                arr[arr.length-1]=this.innerHTML;
    //数组的最后一位保存当前的值
                            }
                            else{
                                arr[arr.length]=txt.value;
    //如果没有连续键入 + - * / ，在数组最后一位后来保存符号值
                                arr[arr.length]=this.innerHTML;
    //这两行代码有先后顺序，先存屏幕上的值，再存键入符号的值
    //（也就是先存键入数字值，换下一位存符号值）
                            }
                           }
                           else{
                               arr[arr.length]=txt.value;//同上
                               arr[arr.length]=this.innerHTML;
                           }
                        txt.value="0";//166行以解释
                       }
                       else if(this.innerHTML=='='){//等于 键
                        arr[arr.length]=txt.value;
                        txt.value=eval(arr.join(''));
    //eval的一个功能为求字符串的值
                        arr=[];
    //求值后将数组置为空，方便下一次计算（原理屏幕值在继续计算时又会存入数组）
                       }
                       else if(this.innerHTML=='del'){//删除键
                           var next=txt.value.split('');
    //先将将屏幕值 （字符串） 分割为字符串数组
                           next.pop();//删除最后一个数组元素
                           if(next.length==0){
                               txt.value='0';
                               return;
    //直到将所有的元素删完，将屏幕赋值为零，跳出此层方法
                           }
                           txt.value = next.join("");//将删完的数组转化为字符串
                       }
                       else{
                           txt.value='0';
                           arr=[];//ac 键 将所有清空即可
    
                       }
                   }
                }
            }
        </script>
    </body>
    
    </html>

自认为在代码中的注释已经比较详细了，所以下面针对制作过程中的一些调试问题展开说明：

*  对于调试时，我们要把自己想象成一个使用计算器的人员，要思考能出现的种种问题；
 *  键入小数点时，要考虑是否是第一次输入，屏幕值知否为空（也就是不能出现两个小数点，不能只出现小数点）
 *  按下加减乘除时，需要将屏幕值清为零（当然你不这么做也可以，只是我后面的代码围绕此来展开，也是数组存值时比较重要的一环）
 *  为了能连续的计算，所以在按下等于键后，须将数组中值清空，以便再次重新存值
 *  del键的原理相比较复杂，需要将屏幕值转化为数组完成操作后再转化为字符串，还要考虑删完所有值后需要将屏幕值赋值为零
 *  录入数组时，有先后顺序，先将屏幕值录入，再将运算符录入。这样就会按顺序将表达式录入数组
 *  在键入运算符时，要考虑是否多次键入，如是，将前者键入运算符覆盖

这个计算器案例虽然代码比较少，原理也比较简单，但对于像我这样的初学者来说，锻炼逻辑有很大的好处。

惊喜！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220331/ef7afa15ab984aa385090091e1c47684.png