利用基础JS写简单计算器(适合JS新手练习条件和循环语句)

最新推荐文章于 2024-07-03 11:26:31 发布

weixin_44447804

最新推荐文章于 2024-07-03 11:26:31 发布

阅读量403

点赞数

文章标签： JavaScript HTML CSS 计算器事件处理

本文链接：https://blog.csdn.net/weixin_44447804/article/details/108944680

版权

首先你要有一个思路,然后读一遍我的代码,尝试理解我的思路,然后自己试着写一遍.
希望对刚接触JS的你有所帮助.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divs {
          width: 500px;
          height: 600px;
          border: 1px solid #000000;
          margin: auto;
        }
        .divs > input {
          width: 460px;
          height: 45px;
          margin-left: 18px;
          margin-top: 10px;
          font-size: 30px;
          background-color: white;
          text-align: right;
        }
        .divs > div {
          width: 100px;
          height: 100px;
          float: left;
          border: 1px solid #000000;
          margin-left: 18px;
          margin-top: 25px;
          font-size: 40px;
          line-height: 100px;
          text-align: center;
          user-select: none;
        }
      </style>
</head>
<body>
    <div class="divs">
        <input type="text" value="0" id="input1" disabled />
        <div class="block">7</div>
        <div class="block">8</div>
        <div class="block">9</div>
        <div class="block">-</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">+</div>
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">*</div>
        <div class="block">C</div>
        <div class="block">0</div>
        <div class="block">=</div>
        <div class="block">/</div>
      </div>
      <script>
        var blocks = document.getElementsByClassName("block");//根据class名获取一类元素
        var input = document.getElementById("input1");//通过id获取input1按钮
        var firstnum = 0;  //用于存放第一组数字的变量
        var symbol;   //用于存放运算符的变量
        var judge = false; 
        for(var i = 0;i < blocks.length;i++){
            blocks[i].onclick = function(){   //点击事件
                if(!isNaN(this.innerHTML)){   //当点击的内容不是运算符时
                    if(judge){                //用于清空上一次运算完结果,通过 true 与 false 来控制是否清空 input.value
                        input.value = "0";
                        judge = false;
                    }
                    input.value = Number(input.value + this.innerHTML).toString() ;
                }else{
                    if(this.innerHTML !== "=" && this.innerHTML !== "C"){    //点击了运算符,但不是 = 和 C 时
                    firstnum =Number(input.value);
                    symbol = this.innerHTML;
                    input.value = "0";
                    }else{
                        if(this.innerHTML === "C"){    //当点击  C  时
                            firstnum = 0;
                            symbol = undefined;
                            input.value = "0";
                        }else{  
                            //当点击运算符  =  时,input中显示运算结果
                            switch(symbol){
                                case "+":
                                input.value = (firstnum + Number(input.value)).toString() ; 
                                break;
                                case "-":
                                input.value = (firstnum - Number(input.value)).toString() ;
                                break;
                                case "*":
                                input.value = (firstnum * Number(input.value)).toString() ;
                                break;
                                case "/":
                                if(Number(input.value) ===0) input.value = "0"; //考虑到除法的除数为0的特殊情况,计算机会返回infinity,因此在这里需要加一个if条件语句来判断一下.
                                else{
                                input.value = (firstnum / Number(input.value)).toString() ;
                                break;
                                }
                            }
                            judge = true;
                        }
                    }
                }
            }
        };













      </script>
</body>
</html>