JavaScript实现计算器

使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。

wangshiyi13

5503人浏览 · 2022-07-18 20:26:24

wangshiyi13 · 2022-07-18 20:26:24 发布

一、计算器界面

实现计算器界面应该有挺多种方式，我使用的是直接div分块再加入按钮，应该也可以使用表格等等，计算器界面的代码如下：

计算器首先需要一个显示屏，这里可以单独分一个块，再将数字与运算符分一个块。

<div class="h1" >
    <div class="result">0</div>
    <div>
        <button class="AC">AC</button>
        <button class="back">C</button>
        <button class="per">%</button>
        <button class="operator">/</button>
    </div>
    <div>
        <button class="buttonValue">7</button>
        <button class="buttonValue">8</button>
        <button class="buttonValue">9</button>
        <button class="operator">*</button>
    </div>
    <div>
        <button  class="buttonValue">4</button>
        <button  class="buttonValue">5</button>
        <button  class="buttonValue">6</button>
        <button  class="operator">-</button>
    </div>
    <div>
        <button  class="buttonValue">1</button>
        <button  class="buttonValue">2</button>
        <button  class="buttonValue">3</button>
        <button  class="operator">+</button>
    </div>
    <div>
        <button >+/-</button>
        <button class="zero">0</button>
        <button class="Dot">.</button>
        <button class="equal">=</button>
    </div>
</div>

当然界面还可以用CSS进行美化，我这方面比较简单：

 <style>

        .h1{
            width:215px;
            border-style: solid;
            border-color: #c5bbff;

        }
        .result{
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            background-color: #c5bbff;
        }

        button{
            background-color: pink;
            width:50px;

        }

    </style>

二、功能实现

有了计算器的界面，接下来就是功能实现。界面上有了显示屏和按钮，但是我们点击按钮显示屏没有反应，所以我们需要获取按钮的信息。为了方便我们对各个按钮进行不同的分类，针对不同的功能需要设计不同的点击事件。我们先创建变量：

    let buttonValues = document.querySelectorAll('.buttonValue');
    let operators = document.querySelectorAll('.operator');
    let result = document.querySelector('.result');
    let displays1 = "";
    let AC = document.querySelector('.AC');
    let Dot = document.querySelector('.Dot');
    let equal = document.querySelector('.equal');
    let C = document.querySelector('.back');
    let per = document.querySelector('.per');
    let zero = document.querySelector('.zero');
    let isDot = true;
    let displays2 = '';

先考虑数字的情况，我们先获取所有数字按钮，然后赋予点击事件，点击按钮可以在显示屏里显示。考虑到首位数字为0时，点击数字应该覆盖而不是出现 0123类似所以我们需要进行一个判断。又如果此时刚做完一次求取结果的运算，点击数字也应该覆盖结果，再增加一个判断语句就可以解决这个问题。

for(i = 0;i<buttonValues.length;i++){
        let buttonValue = buttonValues[i];
        buttonValue.onclick = function(){
            if (displays1==='0'){
                displays1 = buttonValue.innerHTML;
                result.innerHTML = displays1;
            }
            else if (result.innerHTML === displays2) {
                displays1='';
                displays2='';
                displays1 = buttonValue.innerHTML;
                result.innerHTML=displays1;
            }
            else {
                displays1 += buttonValue.innerHTML;
                result.innerHTML = displays1;
            }

        }}

再考虑运算符的情况，我们知道运算符多次点击时应该替换，所以我们对显示屏里的字符串进行判断可以实现这个目的。再考虑做完一次equal之后如果值为错误应该清零，所以再增加一个判断语句。

 for(i = 0;i<operators.length;i++){
        let operator = operators[i];
            operator.onclick = function(){

                if (result.innerHTML === displays2) {
                    displays1=displays2+operator.innerHTML;
                    result.innerHTML=displays1;
                }
                if (displays2==="错误"){
                    displays1='0'+operator.innerHTML;
                    result.innerHTML = displays1;
                    displays2='';
                }
                if (displays1===displays1.substr(0,displays1.length-1)+"+") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                result.innerHTML = displays1;
                }
                else if (displays1===displays1.substr(0,displays1.length-1)+"-") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                    result.innerHTML = displays1;
                }
                else if (displays1===displays1.substr(0,displays1.length-1)+"*") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                    result.innerHTML = displays1;
                }
                else if (displays1===displays1.substr(0,displays1.length-1)+"/") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                    result.innerHTML = displays1;
                }
                else {
                    displays1 += operator.innerHTML;
                    result.innerHTML = displays1;
                }

                isDot=true;


        };

    }

接着考虑小数点，我们知道小数点在一个数字之中只能出现一次，所以我们对小数点加了一个开关。在执行一次点击事件之后关闭，直到下一个数字的出现才可以继续赋值。我们把初始的开关赋值为true，写在了创建的变量的部分里，点击一次小数点按钮之后关闭，点击一次运算符后打开。

Dot.onclick = function () {

        if (displays1 === ""){
            displays1 = '0.';
            result.innerHTML = displays1;
            isDot=false;
        }

        else if (isDot!==true) {
            result.innerHTML = displays1;
            isDot=false;
        }
        else if (result.innerHTML === displays2) {
            displays1='0.';
            result.innerHTML=displays1;
            isDot=false;
        }
       else {
            displays1 += Dot.innerHTML;
            result.innerHTML = displays1;
            isDot=false;
        }

    };

接着是按钮0，我们知道在输入小数点前是不能以0为首出现多个的，所以对0按钮的点击事件也做出了一些限制，也是用if判断语句实现。

 zero.onclick = function(){

        if (result.innerHTML===''){
            displays1 = zero.innerHTML;
            result.innerHTML = displays1;
        }


        else if ( result.innerHTML==="0"){
            result.innerHTML = '0';
        }

        else if (result.innerHTML === displays2) {
            displays1='0';
            result.innerHTML=displays1;
            displays2='';
        }

        else {
        displays1 += zero.innerHTML;
        result.innerHTML = displays1;
        }
    };

清除键与退格键比较简单，注意一个退格键删除最后一个长度的字符串时应该赋值为0。

AC.onclick = function () {

        displays1 = "";
        displays2 = "";
        result.innerHTML = '0';
        isDot=true;
    };


    C.onclick =  function (){
        if (displays1==='0'){
            result.innerHTML = displays1;
        }
        else if(displays1.substr(0, displays1.length - 1)===""){
            displays1='0';
            result.innerHTML = displays1;
        }
       else {
            displays1 = displays1.substr(0, displays1.length - 1);
            result.innerHTML = displays1;
        }

百分号的事件比较简单：

 per.onclick = function () {

        displays2= eval(displays1+'/100');

        result.innerHTML = displays2;
        displays2 = result.innerHTML;
        displays1 = result.innerHTML;
    };

最后是等于号的事件，因为为了方便一些运算符的逻辑所以我们设置了两个显示器，displays1与displays2，方便进行判断。

 equal.onclick = function () {
        if (displays1===displays1.substr(0,displays1.length-1)+"+") {
            result.innerHTML = displays1;
        }
        else if (displays1===displays1.substr(0,displays1.length-1)+"-") {
            result.innerHTML = displays1;
        }
        else if (displays1===displays1.substr(0,displays1.length-1)+"*") {
            result.innerHTML = displays1;
        }
        else if (displays1===displays1.substr(0,displays1.length-1)+"/") {
            result.innerHTML = displays1;
        }


        else {

            displays2 = eval(displays1);
            if (displays2===Infinity){
                displays2="错误";
                result.innerHTML = displays2;
                displays1="";
            }
            result.innerHTML = displays2;
            displays2=result.innerHTML;
            displays1=result.innerHTML;
        }

    };

因为初学HTML ，CSS， JavaScript所以这个计算器的代码可能很多地方都很繁琐，是因为我在写的时候不断的调试，属于自己熟悉JavaScript的练手作业，勿喷勿喷。附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>

        .h1{
            width:215px;
            border-style: solid;
            border-color: #c5bbff;

        }
        .result{
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            background-color: #c5bbff;
        }

        button{
            background-color: pink;
            width:50px;

        }

    </style>



</head>
<body>

<div class="h1" >
    <div class="result">0</div>
    <div>
        <button class="AC">AC</button>
        <button class="back">C</button>
        <button class="per">%</button>
        <button class="operator">/</button>
    </div>
    <div>
        <button class="buttonValue">7</button>
        <button class="buttonValue">8</button>
        <button class="buttonValue">9</button>
        <button class="operator">*</button>
    </div>
    <div>
        <button  class="buttonValue">4</button>
        <button  class="buttonValue">5</button>
        <button  class="buttonValue">6</button>
        <button  class="operator">-</button>
    </div>
    <div>
        <button  class="buttonValue">1</button>
        <button  class="buttonValue">2</button>
        <button  class="buttonValue">3</button>
        <button  class="operator">+</button>
    </div>
    <div>
        <button >+/-</button>
        <button class="zero">0</button>
        <button class="Dot">.</button>
        <button class="equal">=</button>
    </div>
</div>

<script>
    let buttonValues = document.querySelectorAll('.buttonValue');
    let operators = document.querySelectorAll('.operator');
    let result = document.querySelector('.result');
    let displays1 = "";
    let AC = document.querySelector('.AC');
    let Dot = document.querySelector('.Dot');
    let equal = document.querySelector('.equal');
    let C = document.querySelector('.back');
    let per = document.querySelector('.per');
    let zero = document.querySelector('.zero');
    let isDot = true;
    let displays2 = '';
    for(i = 0;i<buttonValues.length;i++){
        let buttonValue = buttonValues[i];
        buttonValue.onclick = function(){
            if (displays1==='0'){
                displays1 = buttonValue.innerHTML;
                result.innerHTML = displays1;
            }
            else if (result.innerHTML === displays2) {
                displays1='';
                displays2='';
                displays1 = buttonValue.innerHTML;
                result.innerHTML=displays1;
            }
            else {
                displays1 += buttonValue.innerHTML;
                result.innerHTML = displays1;
            }

        }}

    Dot.onclick = function () {

        if (displays1 === ""){
            displays1 = '0.';
            result.innerHTML = displays1;
            isDot=false;
        }

        else if (isDot!==true) {
            result.innerHTML = displays1;
            isDot=false;
        }
        else if (result.innerHTML === displays2) {
            displays1='0.';
            result.innerHTML=displays1;
            isDot=false;
        }
       else {
            displays1 += Dot.innerHTML;
            result.innerHTML = displays1;
            isDot=false;
        }

    };
   
    for(i = 0;i<operators.length;i++){
        let operator = operators[i];
            operator.onclick = function(){

                if (result.innerHTML === displays2) {
                    displays1=displays2+operator.innerHTML;
                    result.innerHTML=displays1;
                }
                if (displays2==="错误"){
                    displays1='0'+operator.innerHTML;
                    result.innerHTML = displays1;
                    displays2='';
                }
                if (displays1===displays1.substr(0,displays1.length-1)+"+") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                result.innerHTML = displays1;
                }
                else if (displays1===displays1.substr(0,displays1.length-1)+"-") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                    result.innerHTML = displays1;
                }
                else if (displays1===displays1.substr(0,displays1.length-1)+"*") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                    result.innerHTML = displays1;
                }
                else if (displays1===displays1.substr(0,displays1.length-1)+"/") {
                    displays1=displays1.substr(0,displays1.length-1)+operator.innerHTML;
                    result.innerHTML = displays1;
                }
                else {
                    displays1 += operator.innerHTML;
                    result.innerHTML = displays1;
                }

                isDot=true;


        };

    }


    AC.onclick = function () {

        displays1 = "";
        displays2 = "";
        result.innerHTML = '0';
        isDot=true;
    };


    C.onclick =  function (){
        if (displays1==='0'){
            result.innerHTML = displays1;
        }
        else if(displays1.substr(0, displays1.length - 1)===""){
            displays1='0';
            result.innerHTML = displays1;
        }
       else {
            displays1 = displays1.substr(0, displays1.length - 1);
            result.innerHTML = displays1;
        }
    };
    per.onclick = function () {

        displays2= eval(displays1+'/100');

        result.innerHTML = displays2;
        displays2 = result.innerHTML;
        displays1 = result.innerHTML;
    };

    zero.onclick = function(){

        if (result.innerHTML===''){
            displays1 = zero.innerHTML;
            result.innerHTML = displays1;
        }


        else if ( result.innerHTML==="0"){
            result.innerHTML = '0';
        }

        else if (result.innerHTML === displays2) {
            displays1='0';
            result.innerHTML=displays1;
            displays2='';
        }

        else {
        displays1 += zero.innerHTML;
        result.innerHTML = displays1;
        }
    };

    equal.onclick = function () {
        if (displays1===displays1.substr(0,displays1.length-1)+"+") {
            result.innerHTML = displays1;
        }
        else if (displays1===displays1.substr(0,displays1.length-1)+"-") {
            result.innerHTML = displays1;
        }
        else if (displays1===displays1.substr(0,displays1.length-1)+"*") {
            result.innerHTML = displays1;
        }
        else if (displays1===displays1.substr(0,displays1.length-1)+"/") {
            result.innerHTML = displays1;
        }


        else {

            displays2 = eval(displays1);
            if (displays2===Infinity){
                displays2="错误";
                result.innerHTML = displays2;
                displays1="";
            }
            result.innerHTML = displays2;
            displays2=result.innerHTML;
            displays1=result.innerHTML;
        }

    };


</script>


</body>
</html>