JS：做个计算器

阳春三月天

已于 2023-06-27 13:26:05 修改

阅读量1.3k

点赞数 2

分类专栏： HTML&CSS&JS 文章标签： javascript html5 css

于 2023-06-26 21:52:20 首次发布

本文链接：https://blog.csdn.net/weixin_50517811/article/details/131404394

版权

HTML&CSS&JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

优化指路：JS：做个简单计算器（优化前一篇）_阳春三月天的博客-CSDN博客

1. 目标：实现计算器功能

2. 布局呈现（html&css）

html布局注意点：文本内容不能有空格和换行，在计算时可能会出现无法计算的情况

<div class="inner">
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.fd6e0c627bdd9e29dd0579bfffc1cec1?rik=i%2bA5fn8sjiwZNA&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_match%2f0%2f3409871371%2f0&ehk=5SxBDb8aZgzkyGMhi6%2fHuSe6bBZ75X7YxaqlhXWGabc%3d&risl=&pid=ImgRaw&r=0" alt="">
        <div class="calcbox">
            <div class="calcbody">
                <div class="framebox" id="framebox">
                    0
                </div>

                <div class="box">
                    <div  class="btn">
                        <button id="precent" >%</button>
                    </div>
                    <div class="btn">
                        <button id="ac">AC</button>
                    </div>
                    <div class="btn">
                        <button id="del">
                            <img src="jpg/delete.svg" alt="">
                        </button>
                    </div>
                    <div class="btn">
                        <button id="divsion">/</button>
                    </div>
                    <div class="btn">
                        <button id="senven">7</button>
                    </div>
                    <div class=" btn">
                        <button id="eight">8</button>
                    </div>
                    <div class="btn">
                        <button id="nine">9</button>
                    </div>
                    <div class="btn">
                        <button id="mul">*</button>
                    </div>
                    <div class="btn">
                        <button id="four">4</button>
                    </div>
                    <div class="btn">
                        <button id="five">5</button>
                    </div>
                    <div class="btn">
                        <button id="six">6</button>
                    </div>
                    <div class="btn">
                        <button id="sub">-</button>
                    </div>
                    <div class="btn">
                        <button id="one">1</button>
                    </div>
                    <div class="btn">
                        <button id="two">2</button>
                    </div>
                    <div class="btn">
                        <button id="three">3</button>
                    </div>
                    <div class="btn">
                        <button id="add">+</button>
                    </div>
                    <div class="btn">
                        <button id="addorsub">+-</button>
                    </div>
                    <div class="btn">
                        <button id="zero">0</button>
                    </div>
                    <div class="btn">
                        <button id="dot">.</button>
                    </div>
                    <div class="btn">
                        <button id="eq" >=</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS注意：

在开始时对必要的标签进行初始化
主体内容部分采用flex布局，更加方便


*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

button{
    border: none;
    background-color: transparent;
    outline: none;
}

.inner{
    width: 100%;
    height: 800px;
    position: relative;
}
.inner img{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
}
.calcbox{
    width: 400px;
    height: 600px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: 10px 10px 30px 2px #fff; 
}
.calcbody{
    width: 380px;
    height: 500px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.framebox{
    width: 100%;
    height: 100px;
    box-shadow: 10px 10px 30px 2px #fff; 
    border-radius: 10px;
    /* position: relative; */
    display:flex;
    justify-content:flex-end;
    align-items: flex-end;
    font-size: 30px;
    font-weight: bold;
    padding: 10px 10px;
    color: #fff;
    overflow: hidden;
}

#del{
    position: relative;
}

#del img{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 25%;
    left: 25%;
}

.box{
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content:space-evenly;
}

.btn{
    width: 25%;
    height: 20%;
    border: 1px solid #fff;
    border-radius: 20%;
    transition: opciaty 0.5s ease;
}

.btn:hover{
    opacity: 0.5;
    background-color:rgb(255, 255, 255,0.2);
}

.btn button{
    width: 100%;
    height: 100%;
    font-size: 25px;
    font-weight: bold;
    color:#fff;
    cursor: pointer;
}

delete svg

<svg t="1687765402722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6538" width="200" height="200"><path d="M723.9 418.3c-11.6-11.6-30.5-11.6-42.2 0l-55.6 55.6-55.6-55.6c-11.6-11.6-30.5-11.6-42.2 0-11.6 11.6-11.6 30.5 0 42.2L584 516l-54.6 54.6c-11.6 11.6-11.6 30.5 0 42.2 11.6 11.6 30.5 11.6 42.2 0l54.6-54.6 54.6 54.6c11.6 11.6 30.5 11.6 42.2 0 11.6-11.6 11.6-30.5 0-42.2L668.3 516l55.6-55.6c11.7-11.6 11.7-30.5 0-42.1z m0 0" p-id="6539" fill="#ffffff"></path><path d="M887.7 226.9H361.1c-7.4-3.1-286.4 263.6-286.4 263.6l-3.8 3.8c-3.3 3.3-5.2 7.5-5.8 12-2.5 8.6-1.1 17.1 4.5 22.7L337 797.1h550.6c39.9 0 72.3-31.5 72.3-70.4V297.3c0.1-38.9-32.3-70.4-72.2-70.4zM908.3 690c0 32.2-29.9 58.4-66.7 58.4H376c-0.2-0.3-0.5-0.5-0.8-0.8L138.1 510.3l234.7-234.7h468.9c36.8 0 66.7 26.1 66.7 58.4v356z m0 0" p-id="6540" fill="#ffffff"></path></svg>

3. JS部分

 var total = '';

    zero.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    one.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    two.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    three.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    four.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    five.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    six.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    senven.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    eight.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    nine.onclick = function () {
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    add.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
       
        // framebox.textContent = this.textContent;
    }
    sub.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    mul.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    divsion.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    precent.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
    }
    dot.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
        // framebox.textContent = this.textContent;
    }
    eq.onclick = function(){
        if(total==''){
            framebox.textContent=0;
        }else{
            framebox.textContent = eval(total);
            total = framebox.textContent;
        }
            

        // framebox.textContent = this.textContent;
    }
    del.onclick = function(){
        if('string' == typeof(framebox.textContent)){
            if(framebox.textContent.length>1){
                total = framebox.textContent.substring(0, framebox.textContent.length - 1);
                framebox.textContent = total;
            }else{
                total = '';
                framebox.textContent = '0';
            }
        }
        else{
            alert('错误');
        }}
        // framebox.textContent = this.textContent;}
    addorsub.onclick = function(){
        total = total + '-';
        framebox.textContent = total;
    }
    ac.onclick = function(){
        total = '';
        framebox.textContent = '0';
    }

4. 过程中重要功能按钮设置

为了熟悉JS功能声明，此处数字按钮采用挨个添加onclick事件。改进可以通过给html中的button设置类名去进行循环添加onclick事件操作。

ac清零操作
ac.onclick = function(){
        total = '';
        framebox.textContent = '0';
    }
1. 设置total为空字符串不设置为0的原因：因添加数字的onclick代码如下，防止在进行下一步添加数的操作时显示0。
framebox.textContent = total;
2. 仅是为了显示效果
 framebox.textContent = '0';

del删除单个字符操作
del.onclick = function(){
        if('string' == typeof(framebox.textContent)){
            if(framebox.textContent.length>1){
                total = framebox.textContent.substring(0, framebox.textContent.length - 1);
                framebox.textContent = total;
            }else{
                total = '';
                framebox.textContent = '0';
            }
        }
        else{
            alert('错误');
        }}
1. 此处删除操作采用了substring

语法：string.substring(start,end)

作用：返回两个索引值直接的字符串（包含start，不包含end）

2. 删除时采用 framebox.textContent.length而非total.length

情况1：计算后的数值删除，采用total.lenght，此时total字符串包含运算符，在进行删除时，显示会出现整个字符串添加过程（包含运算符），跟我们平常使用的calc不同。

情况2：非计算后的数值删除时，采用total.length 是正常显示

综合来看，我们需要的是显示内容进行删除，而非本身字符串total，所以采用 framebox.textContent.length

3. 想到删除操作，采用substring，只有字符串可以采用substring，而且对framebox.textContent进行操作，所以要检查传进来的内容是否是string类型，如果不是还需要进行强转，（因为此处在检查中发现已经是'string'类型，只是加个安全检查，else弹窗未进行强转操作）

此处‘string’中的''是重点，勿忽略
'string' == typeof(framebox.textContent
4. 第二层if 检查

非最后一个字符，正常删

最后一个字符的话，点击删除操作后需要显示为0，同时设置total为空字符串。

add、sub、divsion、mul、precent、dot操作为同一onclick事件，以dot为例

1. 为了防止在初始化或者清零删除操作后，total为空字符串，frambox内容为0的情况下，直接添加运算符时，造成仅有运算符的情况，添加了if进行判断。
dot.onclick = function(){
        if(total == ''){
            total = '0';
        }
        total = total + this.textContent;
        framebox.textContent = total;
    }

eq等于操作
   eq.onclick = function(){
        if(total==''){
            framebox.textContent=0;
        }else{
            framebox.textContent = eval(total);
            total = framebox.textContent;
        }
1. 平时使用的计算器在输入只有单个数字或单个数字和运算符时，按等于号，内容不变。这是两种情况，需要进行if操作

以下是思考过程