用JS实现计算器

最新推荐文章于 2024-04-27 05:36:48 发布

易安sparkle

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量4.5k

点赞数 3

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43675447/article/details/90179814

版权

js 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

一、思路

点击数字或符号，将其值放入文本框中；
对于“.”的bug处理；
进行运算：声明一个数组（为动态数组），在清屏前先存值

二、代码块

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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: 75px;
            font-size: 25px;
            outline: none;
            text-align: right;
            background-color: white;
            border-style: none;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4"><input type="text" class="txt" value="0" disabled></td>
    </tr>
    <tr>
        <td colspan="2"><button class="btn" name="btnall">ac</button></td>
        <td colspan="2"><button class="btn" name="btnall">del</button></td>
    </tr>
    <tr>
        <td><button class="btn" name="btnclick">7</button></td>
        <td><button class="btn" name="btnclick">8</button></td>
        <td><button class="btn" name="btnclick">9</button></td>
        <td><button class="btn" name="btnclick">*</button></td>
    </tr>
    <tr>
        <td><button class="btn" name="btnclick">4</button></td>
        <td><button class="btn" name="btnclick">5</button></td>
        <td><button class="btn" name="btnclick">6</button></td>
        <td><button class="btn" name="btnclick">/</button></td>
    </tr>
    <tr>
        <td><button class="btn" name="btnclick">1</button></td>
        <td><button class="btn" name="btnclick">2</button></td>
        <td><button class="btn" name="btnclick">3</button></td>
        <td><button class="btn" name="btnclick">-</button></td>
    </tr>
    <tr>
        <td><button class="btn" name="btnclick">0</button></td>
        <td><button class="btn" name="btnclick">.</button></td>
        <td><button class="btn" name="btnclick">+</button></td>
        <td><button class="btn" name="btnclick">=</button></td>
    </tr>
</table>
<script>
    var btn=document.getElementsByClassName("btn");
    var txt=document.getElementsByClassName("txt")[0];
    var res=[];
    for(var i=0;i<btn.length;i++){
        btn[i].onclick=function(){
            if(!isNaN(this.innerHTML)||this.innerHTML=="."){
                if(txt.value=="0"){
                    if(this.innerHTML=="."){
                        txt.value="0"+this.innerHTML;
                    }
                    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(res.length!=0){
                        if(txt.value=="0"&&isNaN(res[res.length-1])){
                            res[res.length-1]=this.innerHTML;
                        }
                        else{
                            res[res.length]=txt.value;
                            res[res.length]=this.innerHTML;
                        }
                    }
                    else{
                        res[res.length]=txt.value;
                        res[res.length]=this.innerHTML;
                    }
                    txt.value="0";
                }
                else if(this.innerHTML=="="){
                    res[res.length]=txt.value;
                    txt.value=eval(res.join(""));
                    res=[];
                }
                else if(this.innerHTML=="ac"){

                }
                else if(this.innerHTML=="del"){
                    var arr=txt.value.split("");
                    arr.pop();
                    if(arr.length==0){
                        txt.value="0";
                        return;
                    }
                    txt.value=arr.join("");
                }
            }
        }
    }
</script>
</body>
</html>

三、遇到的问题及解决方法

问题：在输入之前，要先将默认的“0”清掉
解决方法：作判断，若当前值为“0”时，则直接赋值；若当前值不为“0”，则做拼接
问题：按“.”时，不能直接显示“.”，需做处理
解决方法：在当前值为“0”中作判断，若当前文本值为“.”，则给该文本值用“0”拼接；否则直接赋值
问题：一个屏上只能有一个“.”
解决思路：在屏幕上已不是“0”时，加入代码，点“.”时考虑是否需要“.”，可使用indexOf方法检索“.”是否出现
注：
indexOf()：如果要检索的字符串值没有出现，则该方法返回 -1。
问题：只有数字和“.”才能出现在屏幕上
解决方法：使用isNaN()
注：
isNaN(x)：用于检查其参数是否是非数字值；若 x 是特殊的非数字值 NaN（或能被转换为这样的值），返回的值就是 true，若x 是其他值,则返回 false。
问题：所按不同符号的结果
解决方法：
（1）若所按符号为“+ - * /”时：按照数组的长度存值，长度为0时先存屏幕的值，长度为1时传入符号
（2）若所按符号为“=”时：按照数组的长度存值；使用join()，将数组拼接为字符串；使用eval()，计算表达式；将计算后得到的值给屏幕
（3）若所按符号为“ac”时：将屏幕上的值清空，数组中的值清空
（4）若所按符号为“del”时：先使用split()，将字符串转为数组；再使用pop()，删除数组最后一个元素；最后使用join()，将数组拼接为字符串
注：
join()：将数组转换为字符串，对数组进行拼接
eval()：计算表达式，进行对象装化
split()：将字符串转换为数组形式；括号里的参数取决于字符串中的标志性东西，以标志性东西截取，产生一个新的数组
pop()：删除数组最后一个元素，并返回删除的元素，对原数组有影响
问题：连续按了两次符号
解决思路：只需判断数组里的最后一位是否为符号，若最后一位是符号，再一次所按的还是符号，则需用该符号将数组的最后一位符号替换掉
解决方法：在所按符号为“+ - * /”中添加代码，
（1）先判断数组的长度是否为0，为0时先存值；不为0时再判断数组的最后一位是否为非数字值（此为符号），是则直接覆盖，否则继续存值
（2）数组长度不为0时的判断条件加当前屏幕的值为0
问题：一次计算过后，需用第一次运算的结果作为第二次运算的值
解决方法：在所按符号为“=”中，每次运算结束将数组清空，为下一次计算作准备；不清空则上一次的表达式还在其中
问题：在所按符号为“del* /”时，删除到最后一位，屏幕值清空了
解决方法：在删除数组最后一个元素后，进行判断，若数组长度为0，则将屏幕值改为0，并且返回该值

易安sparkle

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
用JS实现计算器

一、思路点击数字或符号，将其值放入文本框中；对于“.”的bug处理；二、代码块三、遇到的问题及解决方法问题：在输入之前，要先将默认的“0”清掉解决方法：作判断，若当前值为“0”时，则直接赋值；若当前值不为“0”，则做拼接问题：按“.”时，不能直接显示“.”，需做处理解决方法：在当前值为“0”中作判断，若当前文本值为“.”，则给该文本值用“0”拼接；否则直接赋值问题：一个屏上...
复制链接

扫一扫